jQuery实现模糊查询的方法分析


Posted in jQuery onMay 10, 2018

本文实例讲述了jQuery实现模糊查询的方法。分享给大家供大家参考,具体如下:

需求: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上或许情况还没有那么严重,在手机上测试时那真的是“怎一个卡字了得”,如果哪位大神有更好的法子,还望加以完善!

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
You might like
php程序效率优化的一些策略小结
2010/07/17 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python分数表示方式和写法
2019/06/26 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
会计出纳岗位职责
2013/12/25 职场文书
经典促销广告词大全
2014/03/19 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
对学校的意见和建议
2015/06/04 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫