如何通过两个输入文本字段在表格中组合搜索？答案

【问题标题】：How to combine search in table by two input text fields?如何通过两个输入文本字段在表格中组合搜索？
【发布时间】：2016-10-07 20:14:09
【问题描述】：

我的桌子是这样的：

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

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

【问题讨论】：

什么“第二个输入字段”？
@JosephMarikle 对不起，我举了一个错误的例子。我刚刚用正确的问题更新了这个问题。

标签： javascript jquery html html-table

【解决方案1】：

当您应用过滤器时，您首先会显示所有行，否定之前对其进行的任何过滤。这是该问题的一种解决方案...它存储过滤器并根据您的小提琴将过滤器应用于任一输入的 keyup 事件。

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

【讨论】：

【解决方案2】：

您当前的逻辑有点混乱。您正在重新显示和重新隐藏每个搜索字段的过滤项目。您真正想要的是一次性过滤所有内容：

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)

【讨论】：

【解决方案3】：

您可以使用each() 来完成它。此代码将收集每个keyup()的每个输入的值，然后如果该值存在于对应的td中，使用indexOf()，它将显示包含此tr的tr并隐藏其他td，否则它将显示所有tr's

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>

【讨论】：