Advanced Search

Simple jQuery content filter with BONUS alternating row reset

/ Published in: jQuery
Save to your folder(s)
A simple way to filter lists or tables that uses a new "Contains" (note capitalization) selector to clean up the code a bit. Three examples are below, first sorts through a list, second a table, third a tabe and it correctly the alternating row colors so that it keeps a nice clean look. Example at the link, any questions can be posted there too.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Most simple version, sort items from list
  2. jQuery.expr[':'].Contains = function(a,i,m){
  3.     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
  4. };
  5. function filter(val){
  6.     $("li:Contains('"+val+"')").each(function(){
  7.         $(this).show();
  8.     });
  9.     $("li:not(:Contains('"+val+"'))").hide();
  10. }
  11.  
  12. // Uses the .parent() feature to sort through a table, removing entire rows
  13. jQuery.expr[':'].Contains = function(a,i,m){
  14.     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
  15. };
  16. function filter(val){
  17.     $("td:Contains('"+val+"')").each(function(){
  18.         $(this).parent().show();
  19.     });
  20.     $("td:not(:Contains('"+val+"'))").parent().hide();
  21. }
  22.  
  23. // Same as above but with another loop to correct alternating rows in a table
  24. jQuery.expr[':'].Contains = function(a,i,m){
  25.     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
  26. };
  27. function filter(val){
  28.     $("li:Contains('"+val+"')").each(function(){
  29.         $(this).show();
  30.         if(style=='on'){
  31.             style='off';
  32.         }else{
  33.             style='on';
  34.         }
  35.         $(this).parent().attr("class",style);
  36.     });
  37.     $("li:not(:Contains('"+val+"'))").hide();
  38. }

URL: http://fatfolderdesign.com/196/unimportant/super-simple-content-filtering-with-jquery

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.