列表过滤器。找不到匹配条件。如何？

时间：2018-06-05 02:11:10

标签： javascript jquery html bootstrap-4 html-lists

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

我已经为每个人定制了它。

我想知道如何修改它以显示一个列表项，其中包含以下消息：找不到匹配项。我有一点挑战理解此示例中的逻辑背后切换，因为它隐藏了与 匹配的项目，而不是 显示匹配的项目

我相信这是找不到匹配的逻辑的部分？

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

谢谢

＆＃13;
＆＃13; 
// 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);

    });
  });
});
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

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

此标记最初必须设置为false，并且必须设置在keyup函数内，但indexOf(value)条件 之外（如您所见）想要在发现没有匹配之前循环遍历所有的可搜索结果。）

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

这可以在以下内容中看到：

＆＃13;
＆＃13; 
// 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();
      }
    });
  });
});
＆＃13; 
.list-group.none-found {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以简单地将一个元素添加到默认隐藏的结果中 - 将其设置为＆＃34;找不到结果＆＃34;或者您想要的任何内容。然后检查可见元素的大小。基于尺寸切换显示或隐藏您的＆＃34;未找到结果＆＃34;对话。

这绝对是更优雅的解决方案，但这很简单！只需几行。这是我的代码段

＆＃13;
＆＃13; 
// 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);
      if ($("#list_search_client a").filter(":visible").length < 1){
        $("#list_search_client :last-child").show();
      }
      else{
        $("#list_search_client :last-child").hide();
      }
    });
  });
});
＆＃13; 
    <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>
        <a style="display:none" href="#" class="list-group-item list-group-item-action">No Results Found</a>
      </div>
    </div>
  </section>

  <hr>

</form>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我已经用类似Obsidian Age的方式修改了你的代码。

但是我根据条件来显示＆＃34;没有结果＆＃34;关于可见（未过滤）元素数量的div。如果没有......显然没有结果。

＆＃13;
＆＃13; 
// 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);
    });
    
    // If there is no achor visible, show the "no result" div
    if($("#list_search_client a:visible").length==0){
      $(".noresult").show();
    }else{
      $(".noresult").hide();
    }
  });
});
＆＃13; 
.noresult{
  display:none;
}
＆＃13; 
<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="noresult">
      No result
      </div>
    </div>
  </section>

  <hr>

</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题