在div中选择li - jQuery

Question

我想要一些similar，但几乎没有变化。

我想要的是，每个搜索框即#box搜索<ol> <div> #box所属的<div> <input placeholder="Search Me" id="box" type="text" /> <ol> <li>apples</li> <li>apricots</li> <li>acai</li> <li>blueberry</li> <li>bananas</li> </ol> </div> <div> <input placeholder="Search Me" id="box" type="text" /> <ol> <li>cherry</li> <li>coconut</li> <li>donut</li> <li>durean</li> </ol> </div>

HTMl结构如下

{{1}}

如何修改jQuery来实现这个目标？

Answer 1

$('.box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
    $(this).parent().find('li').show();           
} else {
    $(this).parent().find('li').each(function(){
        var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
    });
 };
 });

演示：http://jsfiddle.net/N32Cd/