仅在匹配搜索时显示数据

Question

我有一个按预期缩小数据范围的过滤器搜索。我想实现默认隐藏所有数据的功能，并且仅在匹配搜索时显示结果。目前，如果没有键入任何内容，则会显示所有内容。一旦添加了所有数据，列表将非常长，因此请求。非常感谢。

$(document).ready(function(){
    $("#search-box").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      var filter = $('#search-filter').val().toLowerCase();
      if(filter == "listitem") {
        $(".listitem").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      } else {
        $(".td-"+filter).filter(function() {
          $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      }
    });
    $('#search-filter').on("change",function(){
      var value = $("#search-box").val().toLowerCase();
      var filter = $(this).val().toLowerCase();
      if(filter == "listitem") {
        $(".listitem").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      } else {
        $(".td-"+filter).filter(function() {
          $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="input-group">
    <div class="input-group-append">
      <select id="search-filter" name="search-filter">
        <!--<option value="listitem">All</option>-->
        <option value="" disabled selected>Search by</option>
        <option value="name">Name</option>
        <option value="surname">Surname</option>
      </select>
    </div>
    <input id="search-box" type="text" name="search" placeholder="Type here..." required="required"/>
  </div>
  <table>
    <thead> 
      <tr>
        <th>Name</th>
        <th>Surname</th>
      </tr>
    </thead>
    <tbody>
      <tr class="listitem">
        <td class="td-name">Jane</td>
        <td class="td-surname">Doe</td>
      </tr>
      <tr class="listitem">
        <td class="td-name">Dela</td>
        <td class="td-surname">Cruz</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

首先隐藏一切。然后使用if语句测试搜索值是否不为空，并显示匹配的元素。

我还将过滤代码提取到一个命名函数中，因此我们不必在两个事件侦听器中重复它。

.filter() 不应该用于对每个元素执行操作，应该使用.each() 来完成。但是在这种情况下，您可以使用它返回一个新集合，该集合只是匹配的元素，然后您可以将它们一起显示。

function filter_items(value, filter) {
  $(".listitem, thead").hide();
  if (value != '') {
    if (filter == "listitem") {
      $(".listitem").filter(function() {
        return $(this).text().toLowerCase().includes(value)
      }).show();
    } else {
      $(".td-" + filter).filter(function() {
        return $(this).text().toLowerCase().includes(value)
      }).closest(".listitem").show();
    }
    if ($(".listitem:visible").length > 0) {
      $("thead").show();
    }
  }
}

$(document).ready(function() {
  $("#search-box").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    var filter = $('#search-filter').val().toLowerCase();
    filter_items(value, filter);
  });
  $('#search-filter').on("change", function() {
    var value = $("#search-box").val().toLowerCase();
    var filter = $(this).val().toLowerCase();
    filter_items(value, filter);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="input-group">
    <div class="input-group-append">
      <select id="search-filter" name="search-filter">
        <!--<option value="listitem">All</option>-->
        <option value="" disabled selected>Search by</option>
        <option value="name">Name</option>
        <option value="surname">Surname</option>
      </select>
    </div>
    <input id="search-box" type="text" name="search" placeholder="Type here..." required="required" />
  </div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
      </tr>
    </thead>
    <tbody>
      <tr class="listitem">
        <td class="td-name">Jane</td>
        <td class="td-surname">Doe</td>
      </tr>
      <tr class="listitem">
        <td class="td-name">Dela</td>
        <td class="td-surname">Cruz</td>
      </tr>
    </tbody>
  </table>
</div>