JavaScript 自动筛选
  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. }

评论

  1. Windows Chrome 55.0.2883.87
    7 年前
    2017-7-30 23:51:32

    现在不到万不得已,都不想折腾代码了,还是看看文章写写文章比较好

    • 黄良钵
      博主
      懿古今
      Linux Chrome 58.0.3029.110
      7 年前
      2017-7-31 9:41:26

      博客数据越多越不敢折腾代码,我觉得要折腾的话,搞个新站专门折腾。

  2. Windows Chrome 55.0.2883.87
    7 年前
    2017-7-29 7:50:41

    博主又是一个技术控

    • 黄良钵
      博主
      福利堆
      Android UC Browser 11.6.2.948
      7 年前
      2017-7-29 9:16:36

      最近学习前端开发,就发一些笔记上去

      • 黄良钵
        Windows Chrome 55.0.2883.87
        7 年前
        2017-7-29 9:46:12

        现在你们搞技术的工资不错吧
        我是看到代码都是很头疼的哦

        • 黄良钵
          博主
          福利堆
          Android UC Browser 11.6.2.948
          7 年前
          2017-7-29 9:54:37

          我现在还在学习,培训中,工资得看在哪吧,大城市还好,二三线的就一般了

          • 黄良钵
            Windows Chrome 55.0.2883.87
            7 年前
            2017-7-29 10:13:36

            搞互联网的那个跑小城市哦
            思想都没传达到
            肯定在大城市了哦

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇