Advanced Search

Return to Snippet

Revision: 41548
at February 19, 2011 18:49 by FatFolderDesigner
Initial Code 
// 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();
}
Initial URL 
http://fatfolderdesign.com/196/unimportant/super-simple-content-filtering-with-jquery
Initial Description 
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.
Initial Title 
Simple jQuery content filter with BONUS alternating row reset
Initial Tags 
jquery
Initial Language 
jQuery