未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例讲述了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表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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


您可能感兴趣的文章:jQuery实现select模糊查询(反射机制)jQuery基于xml格式数据实现模糊查询及分页功能的方法jQuery实现id模糊查询的小例子jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例jquery zTree异步加载、模糊搜索简单实例分享jquery ztree实现模糊搜索功能jquery easyui combobox模糊过滤(示例代码)jQuery实现多级联动下拉列表查询框JQuery+Ajax实现数据查询、排序和分页功能jquery处理页面弹出层查询数据等待操作实例

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryAjaxHTMLiOS数据需求
tags: gt,lt,div,jQuery,class,li,查询,列表,jquery,模糊,col,list,content,input
分页:12
转载请注明
本文标题:jQuery实现模糊查询的方法分析
本站链接:https://www.codesec.net/view/576467.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(124)