Jquery Filter

by aaronk85

HTML

<p>Search term:<input type="text" name="searchfilter" /> </p>

    <table cellspacing="4">
        <tr class="data-header"><td>Months</td></tr>
        <tr class="data-row"><td>January 2010</td></tr>
        <tr class="data-row"><td>February 2010</td></tr>
        <tr class="data-row"><td>March 2010</td></tr>
        <tr class="data-row"><td>March 2011</td></tr>
        <tr class="data-row"><td>April 2011</td></tr>
        <tr class="data-row"><td>May 2011</td></tr>
        <tr class="data-header"><td>Days</td></tr>
        <tr class="data-row"><td>first Monday in 2010</td></tr>
        <tr class="data-row"><td>first Tuesday in 2011</td></tr>
        <tr class="data-row"><td>second Wednesday in January</td></tr>
        <tr class="data-row"><td>fourth Thursday in May</td></tr>
    </table>

CSS

table {
        background-color: #FAF3DF;
    }
    table tr.data-row {
        background-color: #fff;
    }
    table tr.data-row td.selected-cell {
        color: #fff;
        background-color: #660000;
    }
    table tr.data-header {
        background-color: #F1EDE3;
        border-bottom: solid 2px #fff;
        font-weight: bold;
    }
    table tr.selected {
        background-color: #E4CFA8;
    }

JavaScript

jQuery.expr[':'].contains = function(a,i,m){
        return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };

    
    $(document).ready(function(){  
        
        $('input[name="searchfilter"]').keyup(function(){ 
        
            var searchterm = $(this).val();
            
            if(searchterm.length > 3) {
                var match = $('tr.data-row:contains("' + searchterm + '")');
                var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
                //match.children().addClass('selected-cell');
                match.addClass('selected');
                nomatch.css("display", "none");
            } else {
                $('tr.data-row').css("display", "");
                $('tr.data-row').removeClass('selected');
                //$('tr.data-row td').removeClass('selected-cell');
            }
            
        });

    });