Take the 2-minute tour ×

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!

share|improve this question
You have to make it case insensitive - search is not working properly –  Scott Selby Nov 20 '12 at 2:50
How so? It's a case sensitive search. How would I make it case insensitive? I'd prefer that. –  Nick Nov 20 '12 at 2:52
I'll add an answer –  Scott Selby Nov 20 '12 at 3:07
You can make it case insensitive by converting the search term into all lower or upper case, and doing the same for the items in the list. That way, it will be comparing uppercase to uppercase or lowercase to lowercase. :) –  MrXenotype Nov 20 '12 at 3:20
Basically, you can use the code found here: css-tricks.com/snippets/jquery/… –  MrXenotype Nov 20 '12 at 3:33

3 Answers 3

So good to see Nick was successful on this experiment. good job on learning how to do it :)

Just in case you haven't encountered this jquery plugin, you might want to take a look at it too it's called Quick search.


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

share|improve this answer
Thanks @fedmich :) I added it to my arsenal –  Nick Nov 20 '12 at 5:20
:) write less, do more –  fedmich Nov 20 '12 at 6:03
... and you dont always need to reinvent the wheel. if theres already a plugin, use it whenever possible. if it came from good source, and the script is mature enough, its probably been bug-tested quite a lot before. –  fedmich Nov 20 '12 at 6:05
up vote 2 down vote accepted

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">
    <!--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 class="horizontal_containers">Dog</div>
      <div class="horizontal_containers">Rat</div>
      <div class="horizontal_containers">Zebra</div>
      <div class="horizontal_containers">Wolf</div>


      .container {
        width: 100%;
      .horizontal_containers {
        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

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.

share|improve this answer
Maybe make a fiddle so people can see what is actually happening? –  rtpg Nov 20 '12 at 2:47
Here you are, it's also in an edit in the question. jsfiddle.net/mXUtv –  Nick Nov 20 '12 at 2:49
With jsFiddle, you can separate your HTML/CSS/JS code and make it a lot easier to read: jsfiddle.net/8TNP9 –  Justin Morgan Nov 20 '12 at 3:25


$.expr[":"].contains_nocase = $.expr.createPseudo(function(arg) {
    return function( elem ) {

for adding a :contains_nocase() selector with jQuery 1.8

share|improve this answer

Your Answer


