title: How to perform a real time search and filter on a HTML table
body: <p>I've been Googling and searching Stack Overflow for a while, but I just can't get around this problem.</p>
  
  <p>I have a standard HTML table, containing, say, fruit. Like so:</p>
  
  <pre><code>&lt;table&gt;
     &lt;tr&gt;
        &lt;td&gt;Apple&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;Grapes&lt;/td&gt;
        &lt;td&gt;Green&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Above this I have a text box, which I would like to search the table as a user types. So, if they type <code>Gre</code> for example, the Orange row of the table would disapear, leaving the Apple and Grapes. If they carried on and typed <code>Green Gr</code> the Apple row should disapear, leaving just grapes. I hope this is clear.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>If anyone could point me in the right direction it would be brilliant.</p>
  
  <p>Thank you.</p>