/ Published in: jQuery
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
// Most simple version, sort items from list jQuery.expr[':'].Contains = function(a,i,m){ return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filter(val){ $("li:Contains('"+val+"')").each(function(){ $(this).show(); }); $("li:not(:Contains('"+val+"'))").hide(); } // Uses the .parent() feature to sort through a table, removing entire rows jQuery.expr[':'].Contains = function(a,i,m){ return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filter(val){ $("td:Contains('"+val+"')").each(function(){ $(this).parent().show(); }); $("td:not(:Contains('"+val+"'))").parent().hide(); } // Same as above but with another loop to correct alternating rows in a table jQuery.expr[':'].Contains = function(a,i,m){ return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filter(val){ $("li:Contains('"+val+"')").each(function(){ $(this).show(); if(style=='on'){ style='off'; }else{ style='on'; } $(this).parent().attr("class",style); }); $("li:not(:Contains('"+val+"'))").hide(); }
URL: http://fatfolderdesign.com/196/unimportant/super-simple-content-filtering-with-jquery