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 相关文章推荐
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php实现mysql封装类示例
2014/05/07 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript window对象属性整理
2009/10/24 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python抓取百度首页的方法
2015/05/19 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python 学习教程之networkx
2019/04/15 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
单位领导证婚词
2014/01/14 职场文书
《自然之道》教学反思
2014/02/11 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
家长对孩子的评语
2014/04/18 职场文书
美术专业自荐信
2014/07/07 职场文书
世界遗产的导游词
2015/02/13 职场文书