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>

Tags: ,

This entry was posted on Thursday, February 11th, 2010 at 08:08and is filed under Software. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Simple JQuery Table Row Filter”

Leave a Reply