Hiding divs dynamically using a search
<p>JSFiddle for what I have done so far <a href="http://jsfiddle.net/chQ2T/3/" rel="nofollow">http://jsfiddle.net/chQ2T/3/</a></p>

<p>As you can see, I have some divs arranged thus</p>

<p></p>

<pre><code>&lt;div id = "container"&gt;
    &lt;div id = "abc" class = "box"&gt;
        ABC        
    &lt;/div&gt;
    &lt;div id = "cde" class = "box"&gt;
        CDE
    &lt;/div&gt;
    &lt;div id = "efg" class = "box"&gt;
        EFG
    &lt;/div&gt;    
&lt;/div&gt;
</code></pre>

<p>And there is a search box where I want to dynamically hide and show divs based on the search query (executed after every stroke) and the div id. So typing <code>c</code> should hide all divs where the id does not contain substring "c" i.e. the last one.</p>

<p>Typing <code>d</code> after that should hide the additional div abc, since it does not contain the substring "cd". Backspace should restore it. So basically it's a standard dynamic search.</p>

<p>What is missing are the Javascript functions for hiding and showing.</p>

<pre><code>function hide_divs(search) {
    $("#container").not("#"+search).hide();
}

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

<p>I am struggling with restoring the previously hidden divs.</p>
