Hiding Divs Dynamically Using A Search

JSFiddle for what I have done so far http://jsfiddle.net/chQ2T/3/ As you can see, I have some divs arranged thus

Solution 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);
    });
});

Share