通过搜索框中输入的文本搜索div内容

Question

我想实现一项功能，用户可以搜索我们提供的不同品牌。 查看图片以获取我正在寻找的内容：

我想搜索和用与我的搜索匹配的品牌替换div。 我在这里寻找一个想法，我可以轻松地使用ajax调用，但我希望我能用简单的javascript做到这一点。使加载时间尽可能低。 我是否可以使用简单的javascript进行此操作？

<input type='text' placeholder='Search' class='text'><br>
<input type='checkbox' id='a'>A<br>
    <input type='checkbox' id='b'>B<br>
        <input type='checkbox' id='c'>C<br>
            <input type='checkbox' id='d'>D<br>

这里简单的html（没有javascript代码）：http://jsfiddle.net/22nm8o34/

Answer 1

这是我的建议。

HTML：

<input type='text' placeholder='Search' class='text'><br>
<span class="checkbox-wrapper" id="a"><input type='checkbox' id='a'>A<br></span>
<span class="checkbox-wrapper" id="b"><input type='checkbox' id='b'>B<br></span>
<span class="checkbox-wrapper" id="c"><input type='checkbox' id='c'>C<br></span>
<span class="checkbox-wrapper" id="d"><input type='checkbox' id='d'>D<br></span>

包裹范围中的每个复选框，以便隐藏复选框和值。

Jquery的：

$('.text').keyup(function submitClosure(ev) {
    $('.checkbox-wrapper').each(function inputElementClosure(index, element) {
        element = $(element);

        if (element.attr('id').indexOf(ev.target.value) > -1) {
            element.show();
        } else {
            element.hide();
        }
    });
});

收听jQuery keyup事件并循环遍历每个范围。如果span id包含一些输入，则显示它，否则将其隐藏。

希望我理解你的问题是正确的吗？ ：）

以下是更新后的jsfiddle http://jsfiddle.net/22nm8o34/8/

的链接

链接到小写解决方案：http://jsfiddle.net/22nm8o34/10/

指向普通javascript解决方案的链接：http://jsfiddle.net/22nm8o34/21/