Znalazłem całkiem fajny przykład z W3 szkoły pomogło mi dowiedzieć się, jak stworzyć Filtr wyszukiwania.

Dostosowałem, aby wszyscy mogli zobaczyć.

Chciałbym wiedzieć, jak mogę go zmodyfikować, aby wyświetlić tylko element listy z komunikatem, który brzmi: Nie znaleziono dopasowań Silny> Logika za przełącznikiem W tym przykładzie , ponieważ ukrywa elementy, które nie pasują do zamiast , pokazując elementy, które pasują do .

Uważam, że jest to część, w której logika nie ma znalezionych dopasowań?

Być może ktoś mógłby opublikować do niego podejście.

Dziękuję Ci

// 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>
0
suchislife 5 czerwiec 2018, 05:11

3 odpowiedzi

Najlepsza odpowiedź

Oprócz ukrywania pasów non-meczów z .toggle(), będziesz chciał zbudować warunkową if, która sprawdza obecność wyszukiwanego tekstu. Zostanie to wyzwolone, gdy zostanie znaleziony wynik każdy wynik . Wewnątrz tego warunkowego chcesz ustawić flagę (w tym przykładzie, found), która oznacza, że znaleziono wynik.

Ta flaga musi początkowo być ustawiona na false i musi być ustawiona wewnątrz funkcji keyup, ale poza warunkową {x2}} (jak chcesz pętl? Ponad wszystkie Wyniki wyszukiwania przed uświadomieniem, że nie dokonano żadnego dopasowania).

Stąd jest to tylko kwestia używania .hide() i .show(), aby pokazać element, który chcesz wyświetlić, gdy nie znaleziono wyniku. Należy pamiętać, że element ten powinien być domyślnie ukryty.

Można to zobaczyć w następujących przypadkach:

// 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>
1
suchislife 5 czerwiec 2018, 05:00

Zmodyfikowałem swój kod w podobny sposób, w jaki miał wiek Obsydian.

Ale opierałem stan, aby pokazać "brak wyniku" div na ilość widoczny element (niefiltrowany) (niefiltrowany). Jeśli nie ma żadnych ... nie ma wyraźnie wyników.

// 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>
1
Louys Patrice Bessette 5 czerwiec 2018, 02:36

Możesz po prostu dodać element do wyników, który jest domyślnie ukryty - czy ustawiono na "Nie znaleziono wyników" lub cokolwiek chcesz. Następnie sprawdź rozmiar widocznych elementów. W oparciu o rozmiar wyświetlania lub ukrywania okna dialogowego "Brak wyników".

Jest zdecydowanie bardziej eleganckie rozwiązania, ale jest to krótkie i proste! Tylko kilka dodatkowych linii. Oto mój fragment

// 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>
1
chevybow 5 czerwiec 2018, 02:36