Question

我有一个包含各种链接的列表，我想使用输入字段进行搜索。

<form>
    <input id="search">
</form>
<ul>
    <li data-name="one"></li>
    <li data-name="two"></li>
    <li data-name="ozone"></li>
</ul>

当我在输入字段中输入“on”或其他各种单词片段时，如何使用jquerys keyup事件隐藏数据名为“two”的li？

搜索：“两个”

2

搜索：“o”

一个
2
臭氧

搜索：“on”

一个
臭氧

这是迄今为止我所拥有的JSFiddle，但它只适用于从单词的开头匹配，而不是内联。

http://jsfiddle.net/ssDG5/

Answer 1

试试这个：

$('#search').keyup(function()
{
    var val = this.value;

    if (val)
        $('ul > li:not([data-name*="' + val + '"])').hide();
    else
        $('ul > li').show();
});

Fiddle

Answer 2

我建议循环浏览所有li并根据输入值隐藏它们：

$("#search").on("keyup", function() {
    $("li").each(function(index, li) {
        if ($(li).data("data-name").indexOf($("#search").val()) < 0) {
            $(li).hide();
        }
    });
});

如何隐藏具有与输入值不匹配的属性的元素？

2 个答案: