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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
基于JQuery实现页面定时弹出广告
May 08 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
Laravel 队列使用的实现
2019/01/08 PHP
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python实现rest请求api示例
2014/04/22 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
介绍一下gcc特性
2015/10/31 面试题
公司门卫管理制度
2014/02/01 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL