Hiding divs dynamically using a search

Question

JSFiddle for what I have done so far http://jsfiddle.net/chQ2T/3/

As you can see, I have some divs arranged thus

         


        
                      

              相关标签:
       
      

Answer 1

See this updated demo: http://jsfiddle.net/chQ2T/4/

The hide_divs() function has been slightly modified to first hide all divs and then show only those that match.

function hide_divs(search) {
    $("#container > div").hide(); // hide all divs
    $('#container > div[id*="'+search+'"]').show(); // show the ones that match
}

$(document).ready(function() {
    $("#search_field").keyup(function() {
        var search = $.trim(this.value);
        hide_divs(search);
    });
});