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

【问题标题】：How can I hide elements with an attribute that doesn't match an input value?如何隐藏具有与输入值不匹配的属性的元素？
【发布时间】：2014-06-16 04:34:58
【问题描述】：

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

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

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

搜索：“两个”

两个

搜索：“o”

一个
两个
臭氧

搜索：“开”

一个
臭氧

这是迄今为止我所拥有的 JSFiddle，但它只能通过从单词的开头匹配而不是内联来工作。

http://jsfiddle.net/ssDG5/

【问题讨论】：

似乎与标题相反，您希望隐藏属性值与输入值不匹配的元素。此外，该任务未指定，实际上是一项任务分配，而不是适合 SO 的问题。你应该指定你想要的，展示你尝试过的，并解释它是如何失败的。
我已经编辑了问题以尝试清除问题，并且还包含了一个 jsfiddle 链接，用于我尝试过的内容。

标签： javascript jquery html

【解决方案1】：

试试这个：

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

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

Fiddle

【讨论】：

谢谢，我完全不知道 * 会在这方面起作用，也不想尝试。我只熟悉 ^ 和 $。

【解决方案2】：

我建议遍历所有 li 并根据输入值隐藏它们：

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

【讨论】：