Jquery实现列表项的快速检索

来源：互联网发布：浮生一日知乎编辑：程序博客网时间：2024/04/30 16:06

Html代码

    <input type="text" id="shopSearchInput" />    <ul class="list-style shop-address">       <li data-word="北京市朝阳区">北京市朝阳区xxx路xxx街道</li>       <li data-word="上海市浦东新区">上海市浦东新区张江镇xxx弄xxx号</li>       <li data-word="广东省深圳市">广东省深圳市xxx路xxx号</li>    </ul>

JS:

    $('#shopSearchInput').bind('keyup',function(){      var words = $(this).val().replace(/\ +/g,"\\ ").replace(/\'/g,"\\'").replace(/\#/g,"\\#");      if (!words){        $('.shop-address>li').show();        return;      };      $('.shop-address>li').show().filter(':not([data-word*='+words+'])').hide()    })

首先需要将被检索的词(关键词data-word)防止检索项目上
将此方法绑定到#shopSearchInput输入框的keyup事件,一旦检测要用户输入的时候就去匹配,把匹配不到的隐藏掉

0 0