Advanced Search

PWFilter - A jQuery Element Filter Plugin

/ Published in: jQuery
Save to your folder(s)
## 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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  * @package pwFilter
  3.  * @description pwFilter - pixawebFilter - filters a set of elements based on the title element text
  4.  * @author Jared Clarke <[email protected]>
  5.  * @copyright 2010 (c) Jared Clarke @ Pixaweb.co.uk
  6.  * @version 0.1
  7.  */
  8. (function($) {
  9.     $.fn.pwFilter = function(options) {
  10.  
  11.         var opts = $.extend({}, $.fn.pwFilter.defaults, options);
  12.  
  13.         return this.each( function() {
  14.  
  15.             var _filter = $(this);
  16.  
  17.             var _items = $(opts.items);
  18.  
  19.             _filter.bind("keyup", function() {
  20.  
  21.                 var _value = _filter.val();
  22.  
  23.                 if(_value.length == 0 || _value == _filter.defaultValue) {
  24.  
  25.                     _items.fadeIn(opts.duration);
  26.  
  27.                     return _filter;
  28.  
  29.                 }
  30.  
  31.                 _items.each( function(i, el) {
  32.  
  33.                     var _item = $(el);
  34.  
  35.                     var _title = opts.attr == "text" ? _item.find(opts.item).text() : _item.find(opts.item).attr(opts.attr) ;
  36.  
  37.                     if(_title.match(new RegExp(_value, "gi")) == null) {
  38.  
  39.                         _item.fadeOut(opts.duration);
  40.  
  41.                     } else {
  42.  
  43.                         if(_item.is(':hidden'))
  44.                             _item.fadeIn(opts.duration);
  45.  
  46.                     }
  47.                 });
  48.             });
  49.  
  50.             return _filter;
  51.  
  52.         });
  53.     };
  54.  
  55.     $.fn.pwFilter.defaults = {
  56.         items       : '', // items
  57.         item        : '', // filter target
  58.         attr        : '', // attribute
  59.         duration    : 500 // duration of fade
  60.     };
  61.  
  62. })(jQuery);

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.