Question

我正在使用这个jQuery实时过滤器插件：

(function($){
    $.fn.liveFilter = function(inputEl, filterEl, options){
        var defaults = {
            filterChildSelector: null,
            filter: function(el, val){
                return $(el).text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
            },
            before: function(){},
            after: function(){}
        };
        var options = $.extend(defaults, options);

        var el = $(this).find(filterEl);
        if (options.filterChildSelector) el = el.find(options.filterChildSelector);

        var filter = options.filter;
        $(inputEl).keyup(function(){
            var val = $(this).val();
            var contains = el.filter(function(){
                return filter(this, val);
            });
            var containsNot = el.not(contains);
            if (options.filterChildSelector){
                contains = contains.parents(filterEl);
                containsNot = containsNot.parents(filterEl).hide();
            }

            options.before.call(this, contains, containsNot);

            contains.show();
            containsNot.hide();

            if (val === '') {
                contains.show();
                containsNot.show();
            }

            options.after.call(this, contains, containsNot);
        });
    }
})(jQuery);

我想要做的是基于标签进行过滤，因此列表会被每个元素的data-tag属性过滤掉。这就是html的样子：

<li><a href="#" data-tags="tag1">content</a></li>

目前它基于标签的内容进行过滤，我也需要数据标签参与过滤器。

这是小提琴： http://jsfiddle.net/BR7KE/

Answer 1

将过滤器选项传递给插件，在插件中返回按text和data-tag

过滤的元素

试试这个

$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
      filterChildSelector: 'a',
      filter: function(el, val){
             return $(el).data('tags') == val || $(el).text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
      },  

});

无需修改核心插件......

working fiddle

jquery基于内容和标签的实时过滤器

1 个答案: