Posted By

FatFolderDesigner on 02/19/11

Tagged

jquery

Versions (?)

Last Edited at 02/19/11 06:49pm

Statistics

Viewed 780 times

Favorited by 0 user(s)

Related snippets

Simple jQuery content filter with BONUS alternating row reset

/ 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.

Highlighted TextExpand

// 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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.