Jquery实现列表项的快速检索

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事件,一旦检测要用户输入的时候就去匹配,把匹配不到的隐藏掉