CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

OnKeyup search string and hide/show - jQuery

I'm trying to filter a list of span tags on keyup.

I've created something only it returns strange values...

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();
 });

Upvotes: 1

Views: 2262

Answers (3)

Mark
Mark

Reputation: 2071

To make it become case sensitive, you need to override your current 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>

Upvotes: 2

Nisarg Shah
Nisarg Shah

Reputation: 14561

Here you go: https://jsfiddle.net/5u373deu/6/

The problem was with the fact that you were not showing all elements when the user cleared the filter text.

 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();
});

Upvotes: 2

Zenoo
Zenoo

Reputation: 12880

Try refreshing your display everytime :

Note that your search is case sensitive.

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>

Upvotes: 2

Related Questions