JavaScript 自动筛选

1. html,body{
2.     height: 100%;
3.     margin: 0;
4.     padding: 0;
5.     box-sizing: border-box;
6. }
7. .main{
8.     width: 300px;
9.     margin: 80px auto;
10. }
11. .auto-complate input{
12.     width: 200px;
13.     height: 20px;
14.     padding: 0;
15. }
16. .auto-complate ul{
17.     padding: 0;
18.     margin: 0;
19. }
20. .auto-complate li{
21.     list-style: none;
22. }
23. .filter-container img{
24.     width: 80px;
25. }
26. .filter-container{
27.     display: flex;
28.     align-items: center;
29.     border: 1px solid #666666;
30. }

1. <div class="main">
2.     <div class="auto-complate">
3.         <input type="text" id="textDate" placeholder="请输入关键词">
4.         <ul id="filterList">
5.
6.         </ul>
7.     </div>
8. </div>

1. var textInput = document.querySelector('#textDate')
2. var filterList = document.querySelector('#filterList')
3.
4. // 数据源
5. var data = [{
6.     name:'王子豪',
7.     id:1,
8.     pinyin:'wangzihao'
9. },
10. {
11.     name:'小强',
12.     id:2,
13.     pinyin:'xiaoqiang'
14. },
15. {
16.     name:'杨日华',
17.     id:3,
18.     pinyin:'yangrihua'
19. },
20. {
21.     name:'万克浩',
22.     id:4,
23.     pinyin:'wankehao'
24. }]
25.
26. function doFileter(key){
27.     key = key.toLowerCase()
28.     // 把字符串转化为小写
29.     return data.filter(function(item){
30.         if(item.name.indexOf(key) > -1 || item.id.toString().indexOf(key) > -1){
31.             return item
32.         }
33.     })
34. }
35.
36. function binhdhtml(key){
37.     var arr = doFileter(key)
38.     var str = ''
39.     for(var i = 0;i <arr.length;i++){
40.         str += '<li>'
41.         str += '<div class="filter-container"><span>' + arr[i].name + '</span><img src="http://wx4.sinaimg.cn/mw690/9e5389bbly1fhzpxlonefj20go0gon1i.jpg"></div>'
42.         str +='</li>'
43.     }
44.     filterList.innerHTML =str
45. }
46.
47. textInput.onkeyup = function(){
48.     var key = textInput.value
49.     binhdhtml(key)
50. }