jQuery Item Filter

Simple text-match filter that will show/hide html elements that match the string entered by the user.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<script src="https://raw.github.com/th3uiguy/jquery-itemfilter/master/jquery.itemFilter.js"></script>
<h1>jQuery Item Filter Demo</h1>
<h2>Using an Unordered List</h2>
<fieldset>
    <input id="filterPhrase" type="text" />
    <ul>
        <li>Apples</li>
        <li>Oranges</li>
        <li>Grapes</li>
        <li>Strawberries</li>
    </ul>
</fieldset>
<br />
<h2>Using a Table</h2>
<fieldset>
    <input id="filterTablePhrase" type="text" />
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Apple</td><td>Red</td></tr>
            <tr><td>Oranges</td><td>Orange</td></tr>
            <tr><td>Grapes</td><td>Green</td></tr>
            <tr><td>Strawberries</td><td>Red</td></tr>
        </tbody>
    </table>
</fieldset>

CSS

body{ font-size: 0.9em; font-family: Arial, Verdana, sans-serif; color:#555; }
fieldset{ background: #eee; border: 1px solid #ccc; padding:0.5em 0.8em }
.if-container{ border-radius: 4px; background-color: #fff; margin: 0.5em 0 1em; }
table th{ width: 50%; text-align: left; background-color: #e7e7e7; color: #999; padding: 0.2em 0.6em; border-bottom: 1px solid #ccc; }
ul, table{ list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; background-color: #fff; }
ul li, table td{ border-bottom: 1px solid #ccc; padding: 0.3em 0.6em; }
ul li:last-child, table tr:last-child td{ border-bottom: none }

/* jquery.itemFilter.css */
.if-container{
    border: 1px solid #ccc;
    cursor: text;
    zoom: 1;
}
.if-state-active{
    border-color: #999;
}
.if-container:after{
    content: ".";
    display:block;
    height: 0;
    visibility: hidden;
    clear:both;
}
.if-container input{
    font-size: 1em;
    border: none !important;
    width:78%;
    margin-right:20px;
    line-height:1em;
    padding:0;
    margin:0.3em;
    float:left;
}
.if-container input.if-empty{
    color:#999;
    font-style:italic;
}
.if-container .if-icon-search{
    margin: 0.3em;
    float: left;
}
.if-container .if-clear-button{
    margin:0.3em;
    float:right;
    border: none;
    background: none;
    visibility: hidden;
    display:inline-block;
    cursor:pointer;
}
.if-filtered{
    display:none !important;
}
.if-icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("https://raw.github.com/th3uiguy/jquery-itemfilter/master/icons_16x16.png") no-repeat;
}
.if-icon-search{ background-position: top left; }
.if-icon-clear{ background-position: top right; }
.if-state-active .if-icon-search{ background-position: bottom left; }
.if-state-hover .if-icon-clear{ background-position: bottom right; }

JavaScript

$('#filterPhrase').itemFilter();
$('#filterTablePhrase').itemFilter({
    placeholder: 'Filter Table',
    items: $('table>tbody>tr')
});