Simple JQuery Table Row Filter
Here is a quick piece of JQuery JavaScript code I had to write today to filter the rows shown in a table. Search terms are seperated by a space. The code should be self explanatory. Comments welcome.
Click here to see the code below in action.
<html>
<head>
<script src="jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function() {
$("#searchInput").keyup(function(){
//hide all the rows
$("#fbody").find("tr").hide();
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
//Recursively filter the jquery object to get results.
$.each(data, function(i, v){
jo = jo.filter("*:contains('"+v+"')");
});
//show the rows that match.
jo.show();
//Removes the placeholder text
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
</script>
</head>
<body>
<input id="searchInput" value="Type To Filter"><br/>
<table>
<thead>
<tr><th>Column1</th><th>Column2</th></tr>
</thead>
<tbody id="fbody">
<tr><td>cat</td><td>one</td></tr>
<tr><td>dog</td><td>two</td></tr>
<tr><td>cat</td><td>three</td></tr>
<tr><td>moose</td><td>four</td></tr>
<tr><td>mouse</td><td>five</td></tr>
<tr><td>dog</td><td>six</td></tr>
</tbody>
</table>
</body>
</html>
UPDATE:
To make this be insensitive to case, you need to modify it slightly.
The following code creates a custom jquery selector for case-insensitive matching:
$.expr[':'].containsIgnoreCase = function(e,i,m){
return jQuery(e).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
The complete code would then be:
<html>
<head>
<script src="jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function() {
//Declare the custom selector 'containsIgnoreCase'.
$.expr[':'].containsIgnoreCase = function(n,i,m){
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#searchInput").keyup(function(){
$("#fbody").find("tr").hide();
var data = this.value.split(" ");
var jo = $("#fbody").find("tr");
$.each(data, function(i, v){
//Use the new containsIgnoreCase function instead
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});
jo.show();
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
</script>
</head>
<body>
<input value="Type To Filter"><br/>
<table>
<thead>
<tr><th>Column1</th><th>Column2</th></tr>
</thead>
<tbody>
<tr><td>cat</td><td>one</td></tr>
<tr><td>dog</td><td>two</td></tr>
<tr><td>cat</td><td>three</td></tr>
<tr><td>moose</td><td>four</td></tr>
<tr><td>mouse</td><td>five</td></tr>
<tr><td>dog</td><td>six</td></tr>
</tbody>
</table>
</body>
</html>
April 17th, 2010 at 09:14
Exactly the code snippet i needed for an project, saved me hours in php coding.
tyvm!
April 20th, 2010 at 23:51
Glad it was of use. I just added an update that may be of interest about using this with case-insensitive filtering.
May 17th, 2010 at 22:46
Fantastic. Just the job and very succinct!
January 31st, 2011 at 16:35
This is simple and functional. Thank you. Minor suggestion:
Replace:
$(“#fbody”).find(“tr”).hide();
With this:
$(“#fbody”).find(“tr:has(td)”).hide();
So table header rows () don’t get hidden.
February 15th, 2011 at 04:06
JavaScript newbie here, struggling to learn the syntax.
If my filter string is “alpha beta”, this seems to show all rows with “alpha” and/or “beta”. How do I treat the string as a single unit, so that I only match rows with “alpha beta” literally?
Thanks for the example – it’s great.
February 21st, 2011 at 09:11
Thanks! This code is great! I needed for my work, and it helped me a lot – saved me time. It’s working perfect.
March 29th, 2011 at 15:29
Great bit of code, saved lots of time. Thanks