实用的jQuery列表和表格过滤搜索插件-HTML源码网

实用的jQuery列表和表格过滤搜索插件

发布5年前浏览999次上传者

ayumi

1.8 金币 VIP免费

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长(44784009#qq.com),将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

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();
    }
});