时间戳

首页 > 解决方案 > 列表过滤器。未找到匹配项的条件。如何？

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

问题描述

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

我已经定制了下面给大家看。

我想知道如何修改它以仅显示带有消息的列表项：未找到匹配项。我在理解这个示例中切换背后的逻辑时遇到了一些挑战，因为它隐藏了不匹配的项目而不是显示匹配的项目。

我相信这是放置 No Matches Found 逻辑的部分？

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

谢谢

// 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>

标签： javascriptjqueryhtmlbootstrap-4html-lists

解决方案

除了隐藏不匹配项之外.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>

推荐阅读