Niklas Tech Blog

Say you have a table that you would like to filter depending on a search word/s. Before JQuery this was quite a cumbersome task to solve this with javascript. Thanks to JQuery we can today with a few simple lines enable any table to be filtered. Let’s jump straight into it:

Here is the HTML for the table and search input field

<input id="sq" type="text">
 
<table id="ot">
  <thead>
    <tr>
      <th>Col 1</th><th>Col 2</th><th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td><td>Value 2</td><td>Value 3</td>
    </tr>
    <tr>
      <td>Value 4</td><td>Value 5</td><td>Value 6</td>
    </tr>;
    <tr>;
      <td>;Value 7</td><td>Value 8</td><td>Value 9</td>
    </tr>
  </tbody>
</table>

…and here is the code

$("#sq").keyup(function(){
  if($("#sq").val().length > 2){ 	
 
    $("#ot tr").not(":first").not(":contains("+$("#sq").val()+")").hide();
  }
  else {
    $("#ot tr").show();
  }
});

Lets explain a little:

• We use the keyup function to trigger the filter event. It will fire every time we let go of a button but the search event will only happen if the search string is longer than 2 letters
• The magic happens in the next line where we first get all rows (<tr>), except the first (which is the table header). We then find all rows NOT containing our search string and hide them using the JQuery hide() function. This way only the ones that actually contain our search string will be visible
• Lastly we show every row if the search string is shorter than 3 letters

And that is it!

Tested on JQuery 1.9.1 and Chrome 34.0.1847.131