在 div 中选择 li - jQuery答案

【问题标题】：Select li within div - jQuery在 div 中选择 li - jQuery
【发布时间】：2014-07-23 14:29:00
【问题描述】：

我想要一些 similar 的东西，但变化不大。

我想要的是，每个搜索框，即#box 在<div> 所属的同一<div> 中搜索#box

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来实现？

【问题讨论】：

什么..？ id 应该是唯一的..！
你不能拥有相同 id 的不同控件
你不能在一个html结构中多次使用同一个id
回答：jsfiddle.net/Q83f2/43
我先用了下一个，然后我又把他的主题变红了-在#box所属的同一个
中-我使用了父级。

标签： javascript jquery search selection

【解决方案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/

【讨论】：