jquery live filter based on content and tags [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

I'm using This jQuery live filter plugin:

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

What I want to do is to filter based on tags too, so the list gets filtered by data-tag attribute of each element. This is how html looks:

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

Currently it filters based on content of a tags, I need data-tags to be involved in filter too.

Here is the fiddle: http://jsfiddle.net/BR7KE/

Answer 1

pass filter options to the plugins where you return the elements filtering by text and data-tag

try this

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

});

no need to modify the core plugins...

working fiddle