jQuery：同时使用两个搜索栏搜索和过滤一个表

Question

我目前有一个大表（约 500 行），我想同时使用两个搜索栏进行搜索。我的意思是我可以在每个中输入一个查询，结果将匹配它们。 我将表格样本和所有 javascript 放入 Jfiddle。

我也尝试过使用jets.js

var jets = new Jets({
    searchTag  : '#stateSearch', // which searchbox?
    contentTag : '#jetsContent', // where is the data?
    columns    : [2]             // which column to search? (index starts at 0)
});

Jets 的一次搜索和 Jsfiddle 代码的一次搜索以及 Jsfiddle 代码都重现了同样的问题。同一页面上的两个 Jets 实例is not supported。

Answer 1

通过合并这两个函数并使用布尔值来查看查询是否同时匹配状态字段（在状态列中）和名称字段（在名称列中）。

   $('#stateSearch, #allSearch').on('keyup', function(e) {

   var stateFilter = $('#stateSearch').val();
   var nameFilter = $('#allSearch').val();

   var stateReg = new RegExp(stateFilter, 'i')
   var nameReg = new RegExp(nameFilter, 'i')

   $('#jetsContent').find('tr').hide().each(function() {
     var $me = $(this);

     var matchesState = $me.children('td:nth-child(3)').text().match(stateReg);
     var matchesName = $me.children('td:nth-child(2)').text().match(nameReg);

     if (matchesState && matchesName) {
       $me.show()
     }

   })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="stateSearch" class="form-control" placeholder="2 Letter Code...">
<input type="search" id="allSearch" class="form-control" placeholder="Maria">

    <table>
      <tbody id="jetsContent">
        <tr>
          <td>Senator</td>
          <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
          <td>TN</td>
          <td class="republican">Rep.</td>
          <td>455 Dirksen</td>
          <td>(202) 224-4944</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
          <td>WY</td>
          <td class="republican">Rep.</td>
          <td>307 Dirksen</td>
          <td>(202) 224-6441</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.bennet.senate.gov">Bennet, Michael F.</a></td>
          <td>CO</td>
          <td class="democrat">Dem.</td>
          <td>261 Russell</td>
          <td>(202) 224-5852</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.blumenthal.senate.gov">Blumenthal, Richard</a></td>
          <td>CT</td>
          <td class="democrat">Dem.</td>
          <td>706 Hart</td>
          <td>(202) 224-2823</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.blunt.senate.gov">Blunt, Roy</a></td>
          <td>MO</td>
          <td class="republican">Rep.</td>
          <td>260 Russell</td>
          <td>(202) 224-5721</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.booker.senate.gov">Booker, Cory A.</a></td>
          <td>NJ</td>
          <td class="democrat">Dem.</td>
          <td>359 Dirksen</td>
          <td>(202) 224-3224</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.boozman.senate.gov/">Boozman, John</a></td>
          <td>AR</td>
          <td class="republican">Rep.</td>
          <td>141 Hart</td>
          <td>(202) 224-4843</td>
          <td></td>
        </tr>
        
        <tr>
          <td>Senator</td>
          <td><a href="http://www.brown.senate.gov/">Brown, Sherrod</a></td>
          <td>OH</td>
          <td class="democrat">Dem.</td>
          <td>713 Hart</td>
          <td>(202) 224-2315</td>
          <td></td>
        </tr>
                <tr>
          <td>Senator</td>
          <td><a href="http://www.brown.senate.gov/">joe shmoe</a></td>
          <td>OH</td>
          <td class="democrat">Dem.</td>
          <td>713 Hart</td>
          <td>(202) 224-2315</td>
          <td></td>
        </tr>
                <tr>
          <td>Senator</td>
          <td><a href="http://www.brown.senate.gov/">whoever</a></td>
          <td>OH</td>
          <td class="democrat">Dem.</td>
          <td>713 Hart</td>
          <td>(202) 224-2315</td>
          <td></td>
        </tr>
      </tbody>
    </table>