jQuery实现的模糊查询
来源:互联网 发布:office软件管理激活 编辑:程序博客网 时间:2024/05/16 18:06
需求:list列表内容很多,用户需要找出列表内容中的某些条目,只有当与用户输入值匹配的条目才显示出来。(后台无分页,直接异步接口返回数据添加形成的内容列表)
虽然可以通过传参再调用查询出来,但这里主要记录的是前端处理进行模糊查询而无需再次调用接口的实现方法。
html部分:
<div class="search-form"> <input type="text" placeholder="请输入关键词"> <span class="icon-clear"></span></div><div class="content"> <div class="title row no-gutter"> <div class="col-20">列表一</div> <div class="col-20">列表二</div> <div class="col-20">列表三</div> <div class="col-20">列表四</div> <div class="col-20">列表五</div> </div> <div class="list-content"> <ul> <li> <div class="code">00001</div> <div class="name">内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div> </li> <li>……</li> </ul> </div></div>
js部分:
queryList: function(){ $(".search-input").on("input propertychange", function() { var queryStr = $.trim($(".search-input").val()); if(queryStr === ''){ $(".list-content li").show(); }else{ // 以下是匹配某些列的内容,如果是匹配全部列的话就把find()和.parent()去掉即可 $(".list-content li").hide().find(".code, .name").filter(":contains('"+queryStr+"')").parent("li").show(); //$(".list-content").refresh(); //重新刷新列表把隐藏的dom结构去掉。 } });}
以上即实现了前端js的模糊查询功能啦,哈哈。代码中监听事件中多加了input,据说是为兼容iOS的,具体没测试,有哪位大神测试了可以告知一声哈,谢谢了。
还有个问题就是,以上实现方法,当列表内容多大几千条数目或者更多时,表单输入时会出现卡顿的情况,因为要通过js操作大量的DOM结构啊(隐藏或显示),PC上或许情况还没有那么严重,在手机上测试时那真的是“怎一个卡字了得”啊,如果我是那个使用此功能的用户,我肯定会放弃不愿使用的,因为:太卡了,有某有?!有没有哪位大神有好法子的,望不吝赐教啊!
0 0
- jQuery实现的模糊查询
- jQuery实现模糊查询
- jquery的模糊查询
- jQuery autoComplete实现模糊查询
- jQuery实现对表格内容的模糊查询
- jquery实现下拉选的模糊查询功能
- jquery 查找类似autoComplete 实现模糊查询
- jQuery 实现 select模糊查询 反射机制
- 使用jQuery实现实时模糊查询功能
- jquery实现根据控件属性模糊查询
- 实现模糊查询的方法
- Oracle模糊查询的实现
- jQuery模糊查询的两种方法
- Oracle模糊查询之(1.1模糊查询的语法一)Oracle模糊查询的实现
- jquery模糊查询
- jquery模糊查询
- c#+jquery-autocomplete实现类似百度,Google模糊查询
- c#+jquery-autocomplete实现类似百度,Google模糊查询
- SQL 表的创建和增加主键
- 厚积薄发 | 游戏引擎十年技术点滴
- Java基础知识积累1
- 内核模式代码签名走查(四)
- 【Android】wifi开发
- jQuery实现的模糊查询
- jsp application使用getInitParameter来获取web.xml中配置参数
- towebp-loader诞生记~ 一个webpack 图片loader
- UGUI优化干货总结
- Oracle游标for循环
- oc中类的实例化及方法调用
- linux中的vim编辑器使用
- Git fetch和git pull的区别
- https为什么安全之数据加密