jQuery Table & Select List Filter

In a previous post I showed how to integrate a YUI DataTable with simple jQuery client-side filter/search functionality. The technique can very easily be adapted to work with any regular HTML table or HTML select drop-down/listbox. The the code for this is pasted below and a working example can be seen here:

UPDATE: The selectFilter functions below only work in FireFox. See here for a browser independent function.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
//note that you would put these functions in a library .js that you include on every page

//the jQuery default contains function is case-sensitive
//this declaration creates a new Contains function that's case-insensitive
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

var Util = new Object(); //just a namespace object

//the original YUI DataTable filter function
Util.yuiDtFilter = function(tableDivId, filter) {
$("#" + tableDivId + " .yui-dt-data").find('tr').hide();
$("#" + tableDivId + " .yui-dt-data").find('td:Contains("' + filter + '")').parents('tr').show();
}

//slightly modified version of the above to work on any table with a tbody
Util.tableFilter = function(tableBodyId, filter) {
$("#" + tableBodyId).find('tr').hide();
$("#" + tableBodyId).find('td:Contains("' + filter + '")').parents('tr').show();
}

//this one works on any <select> list
Util.selectFilter = function(selectId, filter) {
$("#" + selectId).find('option').hide();
$("#" + selectId).find('option:Contains("' + filter + '")').show();
}
</script>
</head>

<body class=" yui-skin-sam">
<h3>Example 1 - HTML Table Filtering</h3>
<b>Filter:</b> <input type="text" onkeyup="Util.tableFilter('t1-body', this.value)" />
<table id="t1" border="1" width="400">
<thead>
<tr><th width="50%">First Name</th><th width="50%">Last Name</th></tr>
</thead>
<tbody id="t1-body">
<tr><td>John</td><td>Smith</td></tr>
<tr><td>Jane</td><td>Doe</td></tr>
<tr><td>Bob</td><td>Smith</td></tr>
<tr><td>Zack</td><td>Zoolander</td></tr>
<tr><td>Jason</td><td>O'Riley</td></tr>
<tr><td>Caroline</td><td>Blackwood</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
<tr><td>David</td><td>White</td></tr>
</tbody>
</table>

<h3>Example 2 - HTML &lt;select&gt; Filtering</h3>
<b>Filter:</b> <input type="text" onkeyup="Util.selectFilter('s1', this.value)" /><br>
<select size="8" id="s1" style="width:200px">
<option>John Smith</option>
<option>Jane Doe</option>
<option>Bob Smith</option>
<option>Zack Zoolander</option>
<option>Jason O'Riley</option>
<option>Caroline Blackwood</option>
<option>Foo Bar</option>
<option>David White</option>
</select>
</body>
</html>

The above is pretty straight forward. We first include the jquery.js library in the header straight from google servers (you can host it locally of course). We then define a script with a new case-insensitive Contains function, then we define three Util methods to filter a YUI DataTable, a regular tabe or a select listbox. The HTML code that follows shows examples of the latter two. Nothing fancy going on here, just a regular text-input box with a keyup javascript event handler that triggers our filter functions and passes the value of the filter condition and the id of the element we want filtered.

This technique can be expanded to <ul> lists and even custom DOM structures. The thing I like about it most is that once your library functions are defined, adding a filter to a component is just one line of HTML/JS. Try adding filters to YUI DataTables using the technique in the Yahoo examples... it's an absolute mess in comparison.

Comments

  1. The browser-independent link should point to http://richard.gluga.com/2009/07/javascript-selectlist-box-filter.html

    ReplyDelete

Post a Comment

Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word