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 can't seem to find a solution.

I have a standard HTML table with, say, fruit in it. As an example:

<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 is a text box, into which I'd like to search the table as the user types. As a result, if they type Gre, the Orange row of the table would disappear, leaving only the Apple and Grapes. If they kept typing Green Gr, the Apple row should disappear, leaving only grapes. I hope this makes sense.

And, if the user deletes part or all of their query from the text box, I want all of the rows that now match the query to reappear.

While I know how to remove a table row in jQuery, I'm not sure how to do the search and remove rows selectively based on this. Is there a straightforward solution? Or perhaps a plugin?

It would be fantastic if someone could point me in the right direction.

Answer 1

Here is the best solution for searching inside the HTML table while covering all of the table, (all td, tr in the table), pure javascript, and as short as possible:

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id='myTable'>
   <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>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>