Próbuję przefiltrować listę tagów rozpiętości na Keyup.

Stworzyłem coś tylko zwraca dziwne wartości ...

https://jsfiddle.net/5u373deu/1/

 function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span:not(:contains("' + s + '"))').hide();
 }

 $("#clientSearch").keyup(function() {
   searchClients();
 });
1
Liam 28 czerwiec 2017, 12:39

3 odpowiedzi

Najlepsza odpowiedź

Aby stał się wrażliwy na wielkość liter, musisz zastąpić aktualny contains

jQuery.expr[':'].contains = function(a, index, obj) {
  return jQuery(a).text().toUpperCase()
      .indexOf(obj[3].toUpperCase()) >= 0;
};
function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span').show();
   $('.select-options span:not(:contains("' + s + '"))').hide();
 }

 $("#clientSearch").keyup(function() {
   searchClients();
 });
span {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-options ps-container below ps-active-y">

  <input id="clientSearch" type="text">

<span>Bitcoin</span><span>Cat</span><span>Whiskey</span><span>Table</span>
2
Mark 28 czerwiec 2017, 09:52

Tutaj idziesz: https://jsfiddle.net/5u373DEU/6/

Problem polegał na tym, że nie pokazałeś wszystkich elementów, gdy użytkownik usuniesz tekst filtra.

 function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span').show();
   $('.select-options span:not(:contains("'+s+'"))').hide();
 }

$("#clientSearch").keyup(function() {
  searchClients();
});
2
Nisarg 28 czerwiec 2017, 09:49

Spróbuj odświeżyć swój wyświetlacz za każdym razem:

Zauważ, że wyszukiwanie jest wrażliwe na wielkość liter .

function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $('.select-options span').show();
   $('.select-options span:not(:contains("' + s + '"))').hide();
 }

 $("#clientSearch").keyup(function() {
   searchClients();
 });
span {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-options ps-container below ps-active-y">

  <input id="clientSearch" type="text">

<span>Bitcoin</span><span>Cat</span><span>Whiskey</span><span>Table</span>
2
Zenoo 28 czerwiec 2017, 09:44