JavaScript 自动筛选

黄良钵

分类: 程序开发 170 7

  1. html,body{
  2.     height: 100%;
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. .main{
  8.     width300px;
  9.     margin80px auto;
  10. }
  11. .auto-complate input{
  12.     width200px;
  13.     height20px;
  14.     padding: 0;
  15. }
  16. .auto-complate ul{
  17.     padding: 0;
  18.     margin: 0;
  19. }
  20. .auto-complate li{
  21.     list-stylenone;
  22. }
  23. .filter-container img{
  24.     width80px;
  25. }
  26. .filter-container{
  27.     display: flex;
  28.     align-items: center;
  29.     border1px solid #666666;
  30. }
  1. <div class="main">
  2.     <div class="auto-complate">
  3.         <input type="text" id="textDate" placeholder="请输入关键词">
  4.         <ul id="filterList">
  5.         </ul>
  6.     </div>
  7. </div>
  1. var textInput = document.querySelector('#textDate')
  2. var filterList = document.querySelector('#filterList')
  3. // 数据源
  4. var data = [{
  5.     name:'王子豪',
  6.     id:1,
  7.     pinyin:'wangzihao'
  8. },
  9. {
  10.     name:'小强',
  11.     id:2,
  12.     pinyin:'xiaoqiang'
  13. },
  14. {
  15.     name:'杨日华',
  16.     id:3,
  17.     pinyin:'yangrihua'
  18. },
  19. {
  20.     name:'万克浩',
  21.     id:4,
  22.     pinyin:'wankehao'
  23. }]
  24. function doFileter(key){
  25.     key = key.toLowerCase()
  26.     // 把字符串转化为小写
  27.     return data.filter(function(item){
  28.         if(item.name.indexOf(key) > -1 || item.id.toString().indexOf(key) > -1){
  29.             return item
  30.         }
  31.     })
  32. }
  33. function binhdhtml(key){
  34.     var arr = doFileter(key)
  35.     var str = ''
  36.     for(var i = 0;i <arr.length;i++){
  37.         str += '<li>'
  38.         str += '<div class="filter-container"><span>' + arr[i].name + '</span><img src="http://wx4.sinaimg.cn/mw690/9e5389bbly1fhzpxlonefj20go0gon1i.jpg"></div>'
  39.         str +='</li>'
  40.     }
  41.     filterList.innerHTML =str
  42. }
  43. textInput.onkeyup = function(){
  44.     var key = textInput.value
  45.     binhdhtml(key)
  46. }
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、自动筛选

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 7 条评论关于 “JavaScript 自动筛选”

Loading...