filter table rows with multiple filters
<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>