使用输入和复选框的 jQuery 过滤器列表，应优先考虑输入

Question

我无法优先考虑搜索功能。
页面有 1 个搜索和 3 个复选框。
输入框搜索应优先于复选框。
似乎工作到:

1. Enter "pipe"into search//正确返回搜索结果
2. 取消选中“商业”框//正确返回搜索结果
3. 重新选中“commercial”框//错误地返回所有“commercial”items & where items == "pipe"//应该只返回 items + where items == "pipe"

(function($) {
  // catch search char, test and return matched results
  $('#filter').keyup(function() {

    rex = new RegExp($(this).val(), 'i');

    $('.searchable tr').hide();

    $('.searchable tr').filter(function() {

      return rex.test($(this).text());

    }).show();
  })

  // eventListener on checkbox 1, return results
  $(".CommercialBox").click(function() {

    if ($(this).is(":checked")) {

      $(".Commercial").show();

    } else {

      $(".Commercial").hide();

      document.getElementById("ViewAll").checked = false;
    }
  });

  
   // eventListener on checkbox 2, return results
  $(".MajorAcctsBox").click(function() {

    if ($(this).is(":checked")) {

      $(".MajorAccts").show();

    } else {

      $(".MajorAccts").hide();

      document.getElementById("ViewAll").checked = false;
    }
  });

   // eventListener on checkbox 3, return results
  $(".ResidentialBox").click(function() {

    if ($(this).is(":checked")) {

      $(".Residential").show();

    } else {

      $(".Residential").hide();

      document.getElementById("ViewAll").checked = false;
    }
  });
  
 // eventListener on checkbox 4, zero out serch results
  $(".ViewAll").click(function() {

    if ($(this).is(":checked")) {

      document.getElementById("CommercialBox").checked = true;

      document.getElementById("MajorAcctsBox").checked = true;

      document.getElementById("ResidentialBox").checked = true;

      $(".Commercial").show();

      $(".MajorAccts").show();

      $(".Residential").show();

    } else {

      //Don't Do Something

    }

  });

}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="demo_form.asp" method="get">

  <span style='padding:5px;'> <input type="checkbox"  id="CommercialBox" class="CommercialBox" checked>Commercial</input></span>

  <span style='padding:5px;'> <input type="checkbox"  id="MajorAcctsBox" class="MajorAcctsBox" checked >MajorAccts</input></span>

  <span style='padding:5px;'> <input type="checkbox"  id="ResidentialBox" class="ResidentialBox" checked>Residential</input></span>

  <span style='padding:5px;'> <input type="checkbox"  id="ViewAll" class="ViewAll">View All</input></span>

</form>



<div class="input-group">

  <span class="input-group-addon">Filter</span>

  <input id="filter" type="text" class="form-control" placeholder="Type here...">

</div>

<table class="table table-striped">

  <thead>

    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Description</th>
    </tr>

  </thead>

  <tbody class="searchable">

    <tr class="Commercial">

      <td><a href="">Pipeline</a></td>

      <td>Commercial</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Commercial">

      <td><a href="">Dealer List</a></td>

      <td>Commercial</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Commercial">

      <td><a href="">Rate Schedules</a></td>

      <td>Commercial</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Commercial">

      <td>Ally Matrix</td>

      <td>Commercial</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td>Top 30 customers</td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td>Executive Partnerships</td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td>Current Project Pipeline</td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td><a href="">Marketing Policies &amp; Procedures</a></td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td><a href="" target="_blank">Rules Governing Electric Service</a></td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td><a href="" target="_blank">Line and Service Extension Policy</a></td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="MajorAccts">

      <td><a href="" target="_blank">Underground Electric Service Policy</a></td>

      <td>Major Accounts</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Residential">

      <td>Pipeline</td>

      <td>Residential</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Residential">

      <td> Power Certified Information</td>

      <td>Residential</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Residential">

      <td>Certified Dealer List</td>

      <td>Residential</td>

      <td> Power Certified Dealer Information</td>

    </tr>

    <tr class="Residential">

      <td>Certified Dealer Program</td>

      <td>Residential</td>

      <td> Power Certified Dealer Information</td>

    </tr>

    <tr class="Residential">

      <td>Certified Dealer Agreement</td>

      <td>Residential</td>

      <td> Power Certified Dealer Information</td>

    </tr>

    <tr class="Residential">

      <td>Builder List (document to come)</td>

      <td>Residential</td>

      <td> Power Certified Builder Information</td>

    </tr>

    <tr class="Residential">

      <td>Builder Program (document to come)</td>

      <td>Residential</td>

      <td> Power Certified Builder Information</td>

    </tr>

    <tr class="Residential">

      <td>Builder Agreement (document to come)</td>

      <td>Residential</td>

      <td>&nbsp; Power Certified Builder Information</td>

    </tr>

    <tr class="Residential">

      <td> Power Certified Co-op Guidelines</td>

      <td>Residential</td>

      <td>&nbsp;</td>

    </tr>

    <tr class="Residential">

      <td>New-Home Program</td>

      <td>Residential</td>

      <td> Power Certified New-Home Program&nbsp;</td>

    </tr>

    <tr class="Residential">

      <td>New-Home Verification Form</td>

      <td>Residential</td>

      <td> Power Certified New-Home Program</td>

    </tr>

  </tbody>

</table>

也可在 JSFiddle 上找到.编码器，提前谢谢你。

Answer 1

您的逻辑在过滤元素时出现问题。

我刚刚从头开始制作了一个新的过滤功能，通常是通过排除未检查的元素等方式完成的。

function search() {
    var rex = new RegExp($('#filter').val(), 'i');
    var arr = [
        $("#CommercialBox").is(':checked')  ? false : '.Commercial',
        $("#MajorAcctsBox").is(':checked')  ? false : '.MajorAccts',
        $("#ResidentialBox").is(':checked') ? false : '.Residential'
    ];
    var all  = $("#ViewAll").is(':checked');
    var cls  = $(arr.filter(Boolean).join());

    if (this.id === 'ViewAll') {
        $("#CommercialBox, #MajorAcctsBox, #ResidentialBox").prop('checked', true);
    } else if ( $(this).is('[type="checkbox"]') ) {
        $("#ViewAll").prop('checked', false);
    }

    if (all) {
        $('.searchable tr').show();
    } else {
        $('.searchable tr').hide().not(cls).filter(function() {
            return rex.test($(this).text());
        }).show();
    }
}

$('#filter').on('input', search);
$("#CommercialBox, #MajorAcctsBox, #ResidentialBox, #ViewAll").on('change', search);

FIDDLE