title: filter table rows with multiple filters
body: <p>I have a table with several rows and columns and a set of search fields. I would like to be able to show / hide the rows that match / don't match the search fields. Each field is related to a column of the table. I have been partly successful in this task, because the filtering is done correctly (as you can see <a href="https://jsfiddle.net/arzLo9cc/10/" rel="nofollow">here</a>). However, I would like to fix two things. </p>
  
  <ul>
  <li>First is the fact that the jquery script also hides the table head.</li>
  <li>Secondly, I would like to be able to filter the rows as I type. Ex. if I type only 'J' at name box, everything disappears, because there is no row with the name 'J'. However, we have got 'James' and 'Jamie', which are potential match. And I would like to keep them until the name is fully typed. I tried to do it with <code>s1.localeCompare(s2)</code> (link <a href="https://jsfiddle.net/6j5cddg2/" rel="nofollow">here</a>), but it does not work. </li>
  </ul>
  
  <p>By the way, no need to worry about uppercase / lowercase typing. I actually take care of it in the original code, but tried to keep it simple here.</p>
  
  <p>The code here:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function(){
              table = $("#MI6"); //set table name
              search_field = new Object();
              ///we create it as an object, initially empty
              $('.search-key').on('change keyup paste', function () {
                  search_field['name']      = $( "#name" ).val();
                  search_field['lastname']  = $("#lastname").val();
                  search_field['number']    = $("#number").val();
  
                  table.find('tr').each(function () {
                      current_row = $(this); //keep track of the row being checked, iterate through it's cells
                      var display = 0;
                      current_row.show();
                      $(this).find('td').each(function() {
                      //when we stumble upon the data used as a search criteria
                          cell_value = $(this).html(); //gets the value of the cell being checked
                          if (cell_value == search_field[this.id] || search_field[this.id] == '') {
                              display++;    
                          }
                      });
                      if (display &lt; 3) {
                          current_row.hide(); //if this cell is a match, or we no longer want to use it as a search criteria, the row is displayed
                      }
                  });
  
              });   
          });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type="text" id="name" class="search-key" placeholder="name"&gt;
          &lt;input type="text" id="lastname" class="search-key" placeholder="lastname"&gt;
          &lt;input type="number" id="number" class="search-key" placeholder="number"&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;table id="MI6"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Firstname&lt;/th&gt;
                  &lt;th&gt;Lastname&lt;/th&gt; 
                  &lt;th&gt;Number&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="name"&gt;James&lt;/td&gt;
                  &lt;td id="lastname"&gt;Bond&lt;/td&gt; 
                  &lt;td id="number"&gt;7&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="name"&gt;Vesper&lt;/td&gt;
                  &lt;td id="lastname"&gt;Lynd&lt;/td&gt; 
                  &lt;td id="number"&gt;6&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="name"&gt;Rene&lt;/td&gt;
                  &lt;td id="lastname"&gt;Mathis&lt;/td&gt; 
                  &lt;td id="number"&gt;5&lt;/td&gt;
              &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>