您的位置:首页 > Web前端 > JQuery

Jquery实现列表项的快速检索

2016-01-14 16:40 495 查看
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事件,一旦检测要用户输入的时候就去匹配,把匹配不到的隐藏掉
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: