Фильтр списка.Условие для совпадений не найдено.Как? - PullRequest
0 голосов
/ 05 июня 2018

Я нашел довольно классный пример из 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>

Ответы [ 3 ]

0 голосов
/ 05 июня 2018

Вы можете просто добавить элемент к результатам, который по умолчанию скрыт - установите для него значение «Результаты не найдены» или что угодно.Затем проверьте размер видимых элементов.На основе переключателя размера, показывающего или скрывающего диалоговое окно «Результаты не найдены».

Определенно, есть более элегантные решения, но они короткие и простые!Всего несколько лишних строк.Вот мой фрагмент

// 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();
      }
    });
  });
});
    <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>
0 голосов
/ 05 июня 2018

Я изменил ваш код таким же образом, как Obsidian Age.

Но я основал условие, чтобы показать "нет результата" div на сумму visible (нефильтрованный) элемент.Если его нет ... Результатов явно нет.

// 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();
    }
  });
});
.noresult{
  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="noresult">
      No result
      </div>
    </div>
  </section>

  <hr>

</form>
0 голосов
/ 05 июня 2018

В дополнение к сокрытию несоответствий с .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>
...