Скрытие дивы динамически, используя поиск

Question

JSFiddle за то, что я сделал до сих пор http://jsfiddle.net/chQ2T/3/

Как вы можете видеть, я некоторые дивы расположены таким образом

<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> 

И есть окно поиска где я хочу динамически скрыть и показать divs на основе поискового запроса (выполняется после каждого штриха) и id div. Поэтому ввод текста c должен скрыть все div, где id не содержит подстроки «c», т.е. последней.

Ввод d после этого должен скрыть дополнительный div abc, так как он не содержит подстроку «cd». Backspace должен восстановить его. Таким образом, в основном это стандартный динамический поиск.

Отсутствуют функции 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.

Answer 1

Смотрите эту обновленную демо: http://jsfiddle.net/chQ2T/4/

hide_divs() функция была немного изменена, чтобы первым скрыть все дивы, а затем показать только те, которые соответствуют.

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