JavaScript 自动筛选

BG7ZAG

分类： 程序开发 897 7

  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">
  6.         </ul>
  7.     </div>
  8. </div>
  1. var textInput = document.querySelector('#textDate')
  2. var filterList = document.querySelector('#filterList')
  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. }]
  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. }
  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. }
  47. textInput.onkeyup = function(){
  48.     var key = textInput.value
  49.     binhdhtml(key)
  50. }

版权声明: 本站文章除特别声明外，均为本站原创。转载请注明出处，谢谢。

本文地址: https://blog.bg7zag.com/872

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、自动筛选

作者简介： BG7ZAG

打赏

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

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

Loading...