javascript - 検索を使用して div を動的に非表示にする

Question

私がこれまでに行ったことのJSFiddle http://jsfiddle.net/chQ2T/3/

ご覧のとおり、このように配置されたいくつかのdivがあります

<div id = "container">
    <div id = "abc" class = "box">
        ABC        
    </div>
    <div id = "cde" class = "box">
        CDE
    </div>
    <div id = "efg" class = "box">
        EFG
    </div>    
</div>

また、検索クエリ (ストロークごとに実行される) と div id に基づいて div を動的に非表示および表示する検索ボックスがあります。したがって、入力するcと、id に部分文字列「c」、つまり最後の div が含まれていないすべての div が非表示になります。

その後に入力dすると、サブストリング「cd」が含まれていないため、追加の div abc が非表示になります。バックスペースで復元する必要があります。つまり、基本的には標準の動的検索です。

欠けているのは、非表示と表示のための Javascript 関数です。

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

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

以前に隠した div を復元するのに苦労しています。