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