Jquery实现列表项的快速检索
2016-01-14 16:40
495 查看
Html代码
JS:
首先需要将被检索的词(关键词data-word)防止检索项目上
将此方法绑定到#shopSearchInput输入框的keyup事件,一旦检测要用户输入的时候就去匹配,把匹配不到的隐藏掉
<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事件,一旦检测要用户输入的时候就去匹配,把匹配不到的隐藏掉
相关文章推荐
- jQuery中attr()和prop()在修改checked属性时的区别
- JQuery事件处理
- jQuery-实现图片的放大镜显示效果
- 轻松实现jquery手风琴效果
- jQuery取得iframe中元素的常用方法详解
- jquery ajax 使用layer的超时提示
- jquery对象和javascript对象即DOM对象相互转换
- jquery ajax无刷新页面上传
- jQuery 父iframe与子iframe 相互调用传值
- jquery.cxSelect插件,城市没单位
- [转]JQuery Ajax 在asp.net中使用总结
- JQuery 怎么获取选中checkbox值
- jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案
- JQuery中如何重置(reset)表单
- js/jQuery使用过程中常见问题
- jquery淡入淡出效果简单实例
- JQuery 中 next() 方法,需要注意的一个地方
- jQuery实现的左右移动焦点图效果
- JQuery监听页面滚动总结和浏览器动态显示加载图片
- JQuery 中 :first 选择器的使用注意点