Searching a table by input values

Question

I am currently using jQuery to filter a table. The main difference between this and the thousands of other filtered tables here is that this is a table of inputs. I need to filter by the value of the inputs that are in each cell, rather than a text value. Here is a rough approximation of my page, with irrelevant details removed:

  $(document).ready(function(){
    $("#search").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#usertable tbody tr td input").filter($(this)).parent().parent().toggle($(this).val().toLowerCase.indexOf(value) > -1)
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="search" placeholder="Search...">
    <table>
    <tbody>
    <tr>
    <th>First</th>
    <th>Last</th>
    <th>Email</th>
    </tr>
    <tr>
    <td><input value="Steve" /></td>
    <td><input value="Doe" /></td>
    <td><input value="[email protected]" /></td>
    </tr>
    <tr>
    <td><input value="Billy" /></td>
    <td><input value="Bob" /></td>
    <td><input value="[email protected]" /></td>
    </tr>
    </tbody>
    </table>

I am aware that this code is probably fundamentally flawed in some way because I am fairly new to jQuery, but if you take the time to answer I thank you for your patience.

Answer 1

You have to loop through each tr and check if the search input value is found in any of the inputs.

Here is one approach:

notFoundCount is assigned the number of columns. It is negative because we are going to add up indexOf. If it equals -3 (a -1 for each column) then there is no match. It is later use to check if found is greater then -3. If so there is a match and we show the tr else we hide it.

$tr contains all the tr elements to loop over.

$(document).ready(function(){
    var notFoundCount = -3;
    $("#search").on("keyup", function() {
      var value = $(this).val().toLowerCase(),
         $tr =  $("#usertable tbody tr");
      $tr.each(function(){
        var found = 0;
        $(this).find("input").each(function(){
           found += $(this).val().toLowerCase().indexOf(value)
        });
        if (found > notFoundCount){
            $(this).closest('tr').show();
        }else{
            $(this).closest('tr').hide();
        }
      });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="search" placeholder="Search...">
    <table id="usertable"> 
    <tbody>
    <tr>
    <th>First</th>
    <th>Last</th>
    <th>Email</th>
    </tr>
    <tr>
    <td><input value="Steve" /></td>
    <td><input value="Doe" /></td>
    <td><input value="[email protected]" /></td>
    </tr>
    <tr>
    <td><input value="Billy" /></td>
    <td><input value="Bob" /></td>
    <td><input value="[email protected]" /></td>
    </tr>
    </tbody>
    </table>