javascript - 列表过滤器。未找到匹配项的条件。如何？

Question

我从 W3 Schools 找到了一个非常酷的例子这帮助我学习了如何创建搜索过滤器。

我定制了如下供大家查看。

我想知道如何修改它以仅显示一个列表项，并显示一条消息:未找到匹配项。我有一点理解上的挑战> 本例中切换背后的逻辑因为它隐藏了不匹配的项目而不是显示匹配的项目>.

我相信这是放置“未找到匹配项”逻辑的部分？

也许有人可以发布一种方法。

谢谢

// CUSTOM SCRIPT

// List Filter
$(document).ready(function(){
  // On KeyUp...
  $("#input_search_client").on("keyup", function() {
    // All values typed in to lower case...
    var value = $(this).val().toLowerCase();

    $("#list_search_client a").filter(function() {

      // Hide if it does not match
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

    });
  });
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- Google Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

<form>
  <!-- CARD INTRO -->
  <section class="d-flex justify-content-center mb-3">
    <!-- CARD INTRO LEFT -->
    <div class="text-center">
      <h1 class="mb-0 display-4">Search</h1>
      <h4 class="mb-0">Active Clients</h4>
    </div>
  </section>
  <!-- CARD INTRO END -->


  <!-- SECTION - FEX.GRID - JUSTIFY CENTER -->
  <section class="form-group d-flex justify-content-center mb-2">
    <!-- COL-6 - FEX.COLUMN - ELEMENT -->
    <div class="col-6 px-0">
        <input class="form-control form-control-lg px-2" value="" id="input_search_client" type="text" placeholder="Search">
    </div>
  </section>


  <!-- SECTION - FEX.GRID - JUSTIFY START -->
  <section class="form-group d-flex justify-content-center mb-2">
    <!-- COL-6 - FEX.COLUMN - ELEMENT -->
    <div class="col-6 px-0">
      <div class="list-group" id="list_search_client">
        <a href="#" class="list-group-item list-group-item-action">Elliot Alderson</a>
        <a href="#" class="list-group-item list-group-item-action">Darlene Alderson</a>
        <a href="#" class="list-group-item list-group-item-action">Angela Moss</a>
        <a href="#" class="list-group-item list-group-item-action">Sarah Connor</a>
      </div>
    </div>
  </section>

  <hr>

</form>

Answer 1

除了使用 .toggle() 隐藏不匹配项之外，您还需要构建一个 if 条件来检查搜索文本是否存在。当找到每个结果时，将触发此操作。在此条件中，您需要设置一个标志(在本例中为found)来表示已找到结果。

此标志最初必须设置为 false，并且必须设置在 keyup 函数内部，但外部 indexOf(value) 条件(因为您希望在意识到没有匹配项之前循环遍历所有可搜索结果)。

从这里开始，只需使用 .hide() 和 .show() 来显示您希望在未找到结果时显示的元素。请注意，该元素默认情况下应隐藏。

这可以从以下内容看出:

// CUSTOM SCRIPT

// List Filter
$(document).ready(function() {
  // On KeyUp...
  $("#input_search_client").on("keyup", function() {
    // No results have been found yet
    let found = false;
    
    // All values typed in to lower case...
    var value = $(this).val().toLowerCase();

    $("#list_search_client a").filter(function() {
      // Hide if it does not match
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);

      if ($(this).text().toLowerCase().indexOf(value) > -1) {
        // Results found
        $('.none-found').hide();
        found = true;
      }

      // No results found
      if (!found) {
        $('.none-found').show();
      }
    });
  });
});

.list-group.none-found {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Google Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

<form>
  <!-- CARD INTRO -->
  <section class="d-flex justify-content-center mb-3">
    <!-- CARD INTRO LEFT -->
    <div class="text-center">
      <h1 class="mb-0 display-4">Search</h1>
      <h4 class="mb-0">Active Clients</h4>
    </div>
  </section>
  <!-- CARD INTRO END -->


  <!-- SECTION - FEX.GRID - JUSTIFY CENTER -->
  <section class="form-group d-flex justify-content-center mb-2">
    <!-- COL-6 - FEX.COLUMN - ELEMENT -->
    <div class="col-6 px-0">
      <input class="form-control form-control-lg px-2" value="" id="input_search_client" type="text" placeholder="Search">
    </div>
  </section>


  <!-- SECTION - FEX.GRID - JUSTIFY START -->
  <section class="form-group d-flex justify-content-center mb-2">
    <!-- COL-6 - FEX.COLUMN - ELEMENT -->
    <div class="col-6 px-0">
      <div class="list-group" id="list_search_client">
        <a href="#" class="list-group-item list-group-item-action">Elliot Alderson</a>
        <a href="#" class="list-group-item list-group-item-action">Darlene Alderson</a>
        <a href="#" class="list-group-item list-group-item-action">Angela Moss</a>
        <a href="#" class="list-group-item list-group-item-action">Sarah Connor</a>
      </div>
      <div class="list-group none-found">
        <a href="#" class="list-group-item list-group-item-action">No results found.</a>
      </div>
    </div>
  </section>

  <hr>

</form>