• 当前标签:自动筛选

程序开发 JavaScript 自动筛选

html,body{     height: 100%;     margin: 0;     padding: 0;     box-sizing: border-box; } .main{     width: 300px;     margin: 80px auto; } .auto-complate input{     width: 200px;     height: 20px;     padding: 0; } .auto-complate ul{     padding: 0;     margin: 0; } .auto-complate li{     list-style: none; } .filter-container img{     width: 80px; } .filter-container{     display: flex;     align-items: center;     border: 1px solid #666666; } <div class="main">     <div class="auto-complate">         <input type="text" id="textDate" placeholder="请输入关键词">         <ul id="filterList">         </ul>     </div> </div> var textInput = document.querySelector('#textDate') var filterList = document.querySelector('#filterList') // 数据源 var data = [{     name:'王子豪',     id:1,     pinyin:'wangzihao' }, {     name:'小强',     id:2,     pinyin:'xiaoqiang' }, {     name:'杨日华',     id:3,     pinyin:'yangrihua' }, {     name:'万克浩',     id:4,     pinyin:'wankehao' }] function doFileter(key){     key = key.toLowerCase()     // 把字符串转化为小写     return data.filter(function(item){         if(item.name.indexOf(key) > -1 || item.id.toString().indexOf(key) > -1){             return item         }     }) } function binhdhtml(key){     var arr = doFileter(key)     var str = ''     for(var i = 0;i <arr.length;i++){         str += '<li>'         str += '<div class="filter-container"><span>' + arr[i].name + '</span><img src="http://wx4.sinaimg.cn/mw690/9e5389bbly1fhzpxlonefj20go0gon1i.jpg"></div>'         str +='</li>'     }     filterList.innerHTML =str } textInput.onkeyup = function(){     var key = textInput.value     binhdhtml(key) }

2017-07-28 19:45:47 32 7 0
阅读详情
  • 1
前往