Javascript 在div-jQuery中选择li

我想要些零钱少的东西

我想要的是，每个搜索框（即在同一个搜索框所属的位置进行搜索）

HTMl结构如下所示

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

如何修改jQuery来实现这一点

$('.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();
    });
 };
 });

---

此处演示：

什么是。。？id应该是唯一的。。！你不能使用相同id的不同控件你不能在html结构中多次使用同一id答：我先用了next，然后我再次标记了他的主题-在框所属的同一位置-我用了parent。