How can I show / hide divs dynamically (in KeyUp, iTunes style) using Javascript / jQuery and text box or case sensitive search box

Question

I went on a journey to create an iTunes-like search using Javascript. I learned about jQuery, and with some help from the people from StackOverflow, I was successful .

I am back here to share with you a very simple way to create a dynamic hide / show list based on user input.

Let search! 

All tutorial code can be found here .

And JSFiddle for it here !

Answer 1

First, create a simple div layout with some text in the divs and a search bar above it.

  <div class="search_bar"> <form><!--The Field from which to gather data--> <input id="searchfield" type="text" onclick="value=''" value="Case Sensitive Search"> </form> </div> <!--Containers With Text--> <div class="container"> <div class="container_of_hc"> <div class="horizontal_containers">Cat</div> <div class="color">Black</div> <div class="color">White</div> <div class="color">Orange</div> </div> <div class="horizontal_containers">Dog</div> <div class="horizontal_containers">Rat</div> <div class="horizontal_containers">Zebra</div> <div class="horizontal_containers">Wolf</div> </div> 

CSS

  .container { width: 100%; } .horizontal_containers { height:10%; border: solid 3px #B30015; font-size: 45px; text-align: center; } 

Secondly, you will create a script using jQuery. Remember that the name says that this is a dynamic search, that is (for us) we want to update the search with each key entered:

 $("#searchfield").keyup(function() { 

Note. Need to upgrade selector ?

Then we set the variable to the value in the #searchfield field:

  var str = $("#searchfield").val(); //get current value of id=searchfield 

So that we display all the divs in our list when there is nothing in the search field, we create an if statement based on the length of our new variable (str):

  if (str.length == 0) { //if searchfield is empty, show all $(".horizontal_containers").show(); } 

Finally, we actually hide divs if str is not 0:

  else { //if input contains matching string, show div //if input does not contain matching string, hide div $("div:contains('" + str + "').horizontal_containers").show(); $("div:not(:contains('" + str + "')).horizontal_containers").hide(); } }); 

The div:contains() and div:not(:contains()) statements are what set the conditions. This is essentially an if statement. They look for the text contained in the div, not the attributes of the div. If you want to look for a deeper div structure, you can use more than one selector in jQuery script statements, for example:

 if (str.length == 0) { //if searchfield is empty, show all $(".container .color").show(); } else { //if input contains matching string, show div //if input does not contain matching string, hide div $(".container div:contains('" + str + "').color").show(); $(".container div:not(:contains('" + str + "')).color").hide(); } 

Replace the script statement that you should already try.

Note. The nesting structure of your divs should match that in your selector.

And that is essentially it. If you have any suggestions for improving this, know how to change it to a case-insensitive search or anything else you may think about, please let me know

Thanks to MrXenoType, I found out case insensitivity for a function: contains a function.

To create a case-insensitive search for this project, simply add:

 $.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); 

This creates a pseudo for the contains function. Put this code on top of another script (within the same script) to make true just for that script.

Answer 2

So nice to see Nick was successful in this experiment. good job of teaching how to do this :)

Just in case, if you have not come across this jquery plugin, you can also take a look at it, this is called Quick Search.

https://github.com/riklomas/quicksearch

And I used it on numerous pages, and it works like a charm. example: http://fedmich.com/works/types-of-project.htm

Answer 3

Try:

 $.expr[":"].contains_nocase = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); 

to add selector: contains_nocase () with jQuery 1.8