javascript - Searching div content through the text entered in a search box -

i want implement functionality user can search different brands available us. see image i'm looking for:

want search & replace div brands matching search. i'm looking idea here, can ajax call hope can simple javascript. getting load time low possible. ideas whether can simple javascript?

<input type='text' placeholder='search' class='text'><br> <input type='checkbox' id='a'>a<br>     <input type='checkbox' id='b'>b<br>         <input type='checkbox' id='c'>c<br>             <input type='checkbox' id='d'>d<br> 

simple html here (with no javascript code): http://jsfiddle.net/22nm8o34/

here suggestion.

html:

<input type='text' placeholder='search' class='text'><br> <span class="checkbox-wrapper" id="a"><input type='checkbox' id='a'>a<br></span> <span class="checkbox-wrapper" id="b"><input type='checkbox' id='b'>b<br></span> <span class="checkbox-wrapper" id="c"><input type='checkbox' id='c'>c<br></span> <span class="checkbox-wrapper" id="d"><input type='checkbox' id='d'>d<br></span> 

wrap each checkbox in span can hide both checkbox , value.

jquery:

$('.text').keyup(function submitclosure(ev) {     $('.checkbox-wrapper').each(function inputelementclosure(index, element) {         element = $(element);          if (element.attr('id').indexof(ev.target.value) > -1) {             element.show();         } else {             element.hide();         }     }); }); 

listen jquery keyup event , loop throught each span. if span id contains of input, show it, otherwise hide it.

hope understood question correct? :)

here link updated jsfiddle http://jsfiddle.net/22nm8o34/8/

link lower case solution: http://jsfiddle.net/22nm8o34/10/

and link plain javascript solution: http://jsfiddle.net/22nm8o34/21/