Фильтр списка. Условие отсутствия совпадений. Как?

Я нашел довольно интересный пример из W3 школы, который помог мне научиться создавать фильтр поиска.

Я настроил его снизу, чтобы все могли его увидеть.

Я хотел бы знать, как я могу изменить его, чтобы отображать только элемент списка с сообщением, которое гласит: Совпадений не найдено. У меня есть немного бросить вызов пониманиюлогика переключения в этом примере поскольку он скрывает элементы, которые не совпадаютвместопоказ элементов, которые действительно совпадают.

Я считаю, что это та часть, в которой должна быть размещена логика «Нет совпадений»?

Возможно, кто-то сможет опубликовать к нему подход.

Спасибо

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

Это действительно плохой пример использования filter (). Они его неправильно используют. Фильтр должен возвращать логическое значение. Для их использования это должен быть просто each.

— 05.06.2018 04:40

javascript jquery html bootstrap-4 html-lists

05.06.2018 04:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

255

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

05.06.2018 04:29

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

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

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

Мне этот подход кажется интересным, хотя он, кажется, использует 2 фильтра.

— 05.06.2018 05:01

05.06.2018 04:36

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

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

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

05.06.2018 04:36

Другие вопросы по теме

Как присвоить целочисленное значение после разделения определенным дочерним элементам el?

Почему цикл бесконечности событий размытия jquery и javascript

Обработка многомерных массивов PHP

Первоначальный поиск Multiselect2 отключен

Обработка onclick для элемента параметра поля со списком jQuery

Bootstrap 4 - Как определить минимальное количество карточек в строке

Мутация завершена

Проблемы с отладкой ajax

Загрузка файла jQuery ВЫБРАТЬ в mysql по идентификатору галереи

Uncaught SyntaxError: неожиданный токен: (jquery)

Фильтр списка. Условие отсутствия совпадений. Как?

Ответы 3

Другие вопросы по теме

Похожие вопросы