Posted By

minky on 06/05/10

Tagged

Versions (?)

Last Edited at 06/05/10 11:24am

Statistics

Viewed 610 times

Favorited by 0 user(s)

Related snippets

PWFilter - A jQuery Element Filter Plugin

/ Published in: jQuery

## PWFilter

This jQuery Plugin allows you to filter a group of elements based on an attribute via an input element (a live search almost). Examples and such available on http://www.pixaweb.co.uk/resources

Highlighted TextExpand

/*
 * @package pwFilter
 * @description pwFilter - pixawebFilter - filters a set of elements based on the title element text
 * @author Jared Clarke <jared@pixaweb.co.uk>
 * @copyright 2010 (c) Jared Clarke @ Pixaweb.co.uk
 * @version 0.1
 */
(function($) {
    $.fn.pwFilter = function(options) {

var opts = $.extend({}, $.fn.pwFilter.defaults, options);

return this.each( function() {

var _filter = $(this);

var _items = $(opts.items);

_filter.bind("keyup", function() {
                
                var _value = _filter.val();
                
                if(_value.length == 0 || _value == _filter.defaultValue) {

_items.fadeIn(opts.duration);

return _filter;

}

_items.each( function(i, el) {

var _item = $(el);

var _title = opts.attr == "text" ? _item.find(opts.item).text() : _item.find(opts.item).attr(opts.attr) ;

if(_title.match(new RegExp(_value, "gi")) == null) {
                        
                        _item.fadeOut(opts.duration);

} else {

if(_item.is(':hidden'))
                            _item.fadeIn(opts.duration);

}
                });
            });

return _filter;

});
    };
    
    $.fn.pwFilter.defaults = {
        items       : '', // items
        item        : '', // filter target
        attr        : '', // attribute
        duration    : 500 // duration of fade
    };
    
})(jQuery);

URL: http://www.pixaweb.co.uk/resources?tag=jquery

Report this snippet Tweet