Tutorials
Just as we’ve started plugins section with a simple plugin, lets start tutorials section with a simple tutorial in which we will use jQuery to filter out table rows that do not contain desired search string. It really doesn’t get simpler than that as we will use only a couple of jQuery lines to achieve our goal. All we need is a simple HTML page with a form, input field, and a table with some text through which we can do the search. Lets get started.
Step 1 – Create HTML with one form, input field, and one table with some row text
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Filtering Through Table Rows With Few jQuery Lines</title>
</head>
<body>
<h1>Simple table search</h1>
<form action="" method="post">
<input type="text" name="search" value="" size="50" />
</form>
<h2>Table rows</h2>
<table id="list" cellpadding="0" cellspacing="5">
<tr>
<td>This is first table row</td>
</tr>
<tr>
<td>This is second table row</td>
</tr>
<tr>
<td>This is third table row</td>
</tr>
<tr>
<td>This is fourth table row</td>
</tr>
<tr>
<td>This is fifth table row</td>
</tr>
<tr>
<td>This is sixth table row</td>
</tr>
</table>
</body>
</html>
Step 2 – Add jQuery magic
Insert the following code immediately after the <title> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=search]').focus().keyup(function() {
$('#list tr:not(:contains("' + $(this).val() + '"))').hide();
$('#list tr:contains("' + $(this).val() + '")').show();
});
});
</script>
Step 3 – Explanation
After the code here is a short explanation of JavaScript code. I will only explain the actual code, and not jQuery inclusion into the page, as it is pretty much obvious. So, first line:
$('input[name=search]').focus().keyup(function() {
says that upon page load we want to focus on search input field, which means that cursor will be positioned into that field, and users can start typing immediately. After that, we specify that we want a custom function on field key up event, which will happen when someone releases the keyboard key when inside that same element.
Second and third line:
$('#list tr:not(:contains("' + $(this).val() + '"))').hide();
$('#list tr:contains("' + $(this).val() + '")').show();
say that we want to hide table rows which do not contain the string which was typed into the search input field, and possibly show table rows that contain that same string, if they were hidden earlier, which might happen if someone pressed delete or back space for instance.
Fourth line is just a function closure and as such probably doesn’t need a special explanation. And there you have it. A simple search through table rows done under a couple of minutes. Of course, there are many other possibilities which we can add to the code, like erase the default string from search field which might be set upon page load, and return it afterward. Highlight table rows instead hiding them, highlight only text within certain table cells, etc. But, it goes beyond this article and it might be addressed and continued in future articles.
For those of you who don’t believe until you see, here is a tailored demo page where you can see this tutorial in action.
For those of you who actually need this, use the download link below to obtain your copy of the zipped archive which contains previously mentioned demo page.
