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>

jQuery：同时搜索并过滤一个带有两个搜索栏的表

1 个答案: