原生javascript实现的选取搜索组件
标签：
JavaScript
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="less/index.css"><style> .select_text{ width:30%; height: 20px; padding: 8px; border-radius: 5px; color: grey; } .select_text:focus{ border-color: green; box-shadow: 0px 0 5px grey; } .select_span{ position: relative; left: -2%; cursor: pointer; } .select_ul{ display: none; width: 27%; padding: 25px; margin: 0; height: 25vh; border: 1px solid grey; overflow: auto; } .select_li:hover{ background: green; }</style></head><body> <div id="select_container"> </div><script>function select_search(id,arr,name){ var container = document.getElementById(id) var hidden = document.createElement('input') hidden.setAttribute('type','hidden') hidden.setAttribute('name',name) var text = document.createElement('input') text.setAttribute('type','text') text.setAttribute('class','select_text') var span = document.createElement('span') span.setAttribute('class','select_span') span.innerHTML = 'O' var ul = document.createElement('ul') ul.setAttribute('class','select_ul') container.appendChild(hidden) container.appendChild(text) container.appendChild(span) container.appendChild(ul) function getValue(arr){ var lis = '' for(var i=0;i<arr.length;i++){ lis += '<li class="select_li">'+arr[i].name+'</li>' } ul.innerHTML = lis } function searchValue(str,arr){ var retArray = new Array() if(str==''){ retArray = arr }else{ retArray = arr.filter(function(item){ var check = item.name.indexOf(str) if(check!=-1){ return item } }) } return retArray } function chooseValue(ele){ for(var i=0;i<ele.length;i++){ var prop = ele[i].getAttribute('class') if(prop.indexOf('select_li')!=-1){ ele[i].onclick = function(){ var val = this.innerHTML text.value = val } } } } function removeHide(){ ul.style.display = 'block' } function getHide(){ ul.style.display = 'none' } function triggerHide(){ var all = document.getElementsByTagName('*') var arr = new Array('select_text','select_span','select_ul','select_li') for(var i=0;i<all.length;i++){ all[i].onclick = function(e){ e.stopPropagation() e.preventDefault() var prop = this.getAttribute('class') var flag = false if(prop){ for(var j in arr){ var item = arr[j] if(prop.indexOf(item)!=-1){ flag = true break } } } if(!flag){ getHide() }else{ removeHide() } } } } triggerHide() text.onfocus = function(){ removeHide() var val = this.value var valArray = searchValue(val,arr) getValue(valArray) lis = document.getElementsByTagName('li') chooseValue(lis) } text.onkeyup = function(){ var val = this.value var valArray = searchValue(val,arr) getValue(valArray) lis = document.getElementsByTagName('li') chooseValue(lis) } span.onclick = function(e){ var val = text.value var valArray = searchValue(val,arr) getValue(valArray) lis = document.getElementsByTagName('li') chooseValue(lis) e.stopPropagation() e.preventDefault() var style = ul.style.display if(style=='block'){ getHide() }else{ removeHide() } }}var arr = new Array( { id:1, name:'a' }, { id:2, name:'b' }, { id:3, name:'c' }, { id:4, name:'aa' }, { id:5, name:'bb' }, { id:6, name:'cc' } ) select_search('select_container',arr)</script></body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦