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


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.