Question

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

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

Let's search!

The entirety of the tutorial code can be found here.

And a JSFiddle for it is here!

Answer 1

First, create a simple Div Layout with some text in the divs and 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;
      }

Second, you will make a script utilizing jQuery. Remember the title says this is a Dynamic Search, meaning (for us) we want to update the search with each key typed:

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

Note: Need a selector refresher?

Then we will set a variable to the value in #searchfield:

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

To ensure we show all the divs in our list when there is nothing in the searchfield 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();
  }

Last, we do the actual hiding of the divs if the length of 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. It’s essentially an if statement. They search the text contained within the div, not the div attributes. If you want to search a deeper div structure you can use more than one selector in the script’s jQuery statements like so:

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 you already have to give it a try.

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

And that’s essentially it. If you have tips to improve this, know how to change it to a case insensitive search, or anything else you can think of, please let me know!

Thanks to MrXenoType I have learned case insensitivity for the :contains 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. Place this code above your other script (within the same script) to make true for only this script.