表单/表格
列表表格过滤搜索jQuery插件
PetitQ
jQuery-easySearch 是一款可以实现对列表和表格内容进行过滤搜索的 jQuery 插件。
使用方法
使用该过滤搜索插件需要在页面中引入 jquery 和 jquery.easysearch.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.easysearch.js"></script>
HTML 结构
需要使用一个<input>元素来作为搜索框。
<input type="text" placeholder="Search...">
初始化插件
在页面 DOM 元素加载完毕之后，可以通过 jSearch()方法来初始化该过滤搜索插件，在参数中指定搜索的父元素和子元素。
$('input').jSearch({
selector : 'ul',
child : 'li'
});
例如在列表中进行搜索：
$('input').jSearch({
selector : 'ul',
child : 'li div.header',
minValLength: 0,
Found : function(elem){
$(elem).parent().parent().show();
},
NotFound : function(elem){
$(elem).parent().parent().hide();
},
After : function(t){
if (!t.val().length) $('ul li').show();
}});
在表格中进行搜索：
$('input').jSearch({
selector : 'table',
child : 'tr > td',
minValLength: 0,
Before: function(){
$('table tr').data('find','');
},
Found : function(elem){
$(elem).parent().data('find','true');
$(elem).parent().show();
},
NotFound : function(elem){
if (!$(elem).parent().data('find'));
$(elem).parent().hide();
},
After : function(t){
if (!t.val().length) $('table tr').show();
}});
配置参数
可用的配置参数有：
selector：要进行过滤搜索的父元素
child：要进行过滤搜索的子元素
minValLength：输入几个文字时触发搜索
onFound：如果搜索匹配时触发该回调函数
onNotFound：如果没有任何搜索匹配时触发该回调函数
onBefore：在搜索前触发
onAfter：在搜索后触发
Github 地址：https://github.com/Archakov06/jQuery-easySearch
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
