如何在两个输入文本字段中合并表中的搜索？

Question

我的表看起来像这样：

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

搜索的javascript如下：

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(); 
}); 

看看这个例子就明白了我的问题，更好地：

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

我过滤表具有第一个输入字段的行。然后，当我使用第二个输入字段时，不包括首次搜索的结果。我该如何解决它？

Answer 1

您目前的逻辑有点困惑。您将重新显示并重新隐藏每个搜索字段的过滤项目。你真正想要的是过滤一切一气呵成，像这样：

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>

那是当然假设列和过滤器领域的非动态数字。如果这就是你要做的，你需要检查索引而不是硬编码td:nth-child(1)和td:nth-child(2)

Answer 2

当您应用您的过滤器时，您首先显示所有行，否定之前的任何过滤。这是解决这个问题的方法之一......它存储过滤器，并基于你的小提琴将它们应用于任一输入的按键事件。

var $rows = $('#table tr'); 
var filters = { col1: '', col2: ''}; 
$('#search1').keyup(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
    filters.col1 = val; 
    applyFilters(); 
}); 
$('#search2').keyup(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
    filters.col2 = val; 
    applyFilters(); 
}); 
function applyFilters() { 
    $rows.show(); 
    $rows.filter(function() { 
     var text = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(filters.col1); 
    }).hide(); 
    $rows.filter(function() { 
    var text = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(filters.col2); 
    }).hide(); 
}; 

Answer 3

你可以使用each()来完成它。此代码将收集每个输入的值对每个keyup()，那么如果使用indexOf()在相应td存在这个值，它会显示包含该td的tr并隐藏其他人，否则它会显示所有tr的

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

var $rows = $('#table tr'), 
 
    searchVal1, 
 
    searchVal2, 
 
    td1, 
 
    td2; 
 

 
$('input').keyup(function() { 
 
    searchVal1 = $('#search1').val(), 
 
    searchVal2 = $('#search2').val(); 
 

 
    $rows.each(function (index, tr) { 
 
    td1 = $(tr).find('td:nth-of-type(1)').text().toLowerCase(), 
 
    td2 = $(tr).find('td:nth-of-type(2)').text().toLowerCase(); 
 

 
    if ((td1.indexOf(searchVal1) != -1) && (td2.indexOf(searchVal2) != -1)) { 
 
     $(this).show(); 
 
    } else { 
 
     $(this).hide(); 
 
    } 
 
    }); 
 

 
    if ((searchVal1 === '') && (searchVal2 === '')) { 
 
    $rows.show(); 
 
    } 
 
});

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>