How to perform a real time search and filter on a HTML table

Question

I've been Googling and searching Stack Overflow for a while, but I just can't get around this problem.

I have a standard HTML table, containing, say, fruit. Like so:

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

Above this I have a text box, which I would like to search the table as a user types. So, if they type Gre for example, the Orange row of the table would disapear, leaving the Apple and Grapes. If they carried on and typed Green Gr the Apple row should disapear, leaving just grapes. I hope this is clear.

And, should the user delete some or all of their query from the text box, I should like all of the rows that now match the query to reappear.

While I know how to remove a table row in jQuery, I have little idea about how to go about doing the search and removing rows selectively based on this. Is there a simple solution to this? Or a plugin?

If anyone could point me in the right direction it would be brilliant.

Thank you.

Answer 1

How to use it:

1. Add filters to your HTML tables' header columns as follows: < table class = "table" > < thead > 
2. Load the main script Filter. js after loading the latest jQuery library. 
3. Load the necessary stylesheet when needed. view source. 
4. Add a rows counter to the bottom of the table.