Vitaly Romaniv Vitaly Romaniv - 6 months ago 18
HTML Question

How to combine search in table by two input text fields?

My table looks like this:

<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>


The searching javascript as follows:

var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});


Look at this example to understand my problem better:

http://jsfiddle.net/7BUmG/4398/

I filter table rows with the first input field. Then, when I use the second input field, results of first search are not included. How can I fix it?

Answer

Your current logic is a little confused. You are re-showing and re-hiding the filtered items for every search field. What you really want is to filter it all in one go like so:

var $rows = $('#table tr');
$('#search1, #search2').on('input', function() {
    var val1 = $.trim($('#search1').val()).replace(/ +/g, ' ').toLowerCase();
    var val2 = $.trim($('#search2').val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text1 = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
        var text2 = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text1.indexOf(val1) || !~text2.indexOf(val2);
    }).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 98px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search1" placeholder="Type to search">
<input type="text" id="search2" placeholder="Type to search">
<table id="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>

That's of course assuming non-dynamic number of columns and filter fields. If that's what you're after, you need to check the index rather than hard coding td:nth-child(1) and td:nth-child(2)