Javascript 只有两个词匹配时才采取行动

我有一个想法，但我真的不知道如何使它工作，我只有多个方法的碎片，似乎不去头对头

因此，我想让大家看一看我的才华，假设我有3个内容容器，其中包括： about、portfolio和contact、about可见，其他两个隐藏

我有一个文本框（或搜索框，不管你怎么称呼它），我想要的是，如果我写下（在我按下enter键之后）我设置的任意一个单词（在本例中：poftfolio，portofoliu），about容器将淡出，portfolio类容器将淡出。这同样适用于约和接触

我不知道该怎么做。。。 有什么帮助吗？此外，如果你有一些设置，一把小提琴真的会派上用场，让你清楚地了解它是如何工作的

谢谢

PS：我能想到的最好的函数之一可能是jQuery函数。is-a。是（b），但我不知道如何使用它与文本框中的文本进行比较

我确实尝试过，但很快就失败了：

$("#portfolio").hide();
$("#wrong").hide();

$('#search').keyup(function() {
    if ($("#portfolio").is("#search")) {

    $("#portfolio").fadeIn();

}else{
    $("#wrong").fadeIn();
}
});

在所有

DIV

元素中添加

hidden

类

<div class="hidden" id="portfolio">Hello</div>
<div class="hidden" id="wrong">Not quite</div>

编辑：如果你想确保你的目标是

ID

严格使用小写字母，只需添加

.toLowerCase（）

如果您想降低上述要求，而不是仅使用

[id=

，您可以尝试其他选择器，如：

[id*=  Contains...
[id^=  Starts With...
[id$=  Ends With...

试一试

html

JSFIDLE

---

请参见，

当您说

$（“#公文包”）。是（“#搜索”）

，您将获得具有公文包的

id

的元素，然后检查其

id

是否为搜索。它总是返回false。@只是我在途中发现了这一点……我的bad@Alin请参阅post.thanks，它只会在点击Enter之后才显示隐藏的分类容器的内容，以避免showi只需按一下，即可打开#公文包的容器p@Alin我知道是你要求的，我想这样它实际上是一个功能。编辑我的答案…现在的更新指出了另一个错误，当你从公文包中写p，然后你从错误中删除它来写w时，你和guest271314的两个divs都有很好的答案，只有一个两者都缺少一点，当你用小写搜索时，它可以工作，但我需要它在你有大写首字母和所有大写字母的情况下工作，因为这也将用于手机搜索，而且大多数手机都有默认的大写首字母。谢谢你所做的一切。@Alin你应该探索更多可用的JS方法。

.toLowerCase（）

是您所需要的。我们在这里不是为您做作业，而是为您提供一些基本想法。您需要进一步改进代码，以满足您的确切需求。您和Roko都有很好的/有效的答案/示例，只有一件事两者都缺少，当您使用小写字母搜索时，它可以工作，但当您使用大写字母时，我需要它工作se和所有字母大写也是如此，因为这也将用于电话搜索，而且大多数电话都有默认的首字母大写。顺便说一句，谢谢您所做的一切。在您的示例中，我认为这类似于“var search=$（“#search”）.val（）.toLowerCase（）'PS:我似乎无法通过按下按钮使#搜索也起作用…知道为什么吗？尝试将

事件

附加到

按钮

元素？请参阅“描述：将一个或多个事件的事件处理程序函数附加到所选元素。”

[id*=  Contains...
[id^=  Starts With...
[id$=  Ends With...

<input id="search" type="text" />
<div id="content">
    <div id="about">about
        <br /><i>about content</i>
    </div>
    <div id="portfolio">portfolio
        <br /><i>portfolio content</i>
    </div>
    <div id="contact">contact
        <br /><i>contact content</i>
    </div>
</div>

var substringMatcher = function (strs, q, cb) {
    return (function (q, cb, name) {
        var matches, substrRegex;
        // an array that will be populated 
        // with substring matches
        matches = [];
        // regex used to determine if a string 
        // contains the substring `q`
        substrRegex = new RegExp(q, 'i');
        // iterate through the pool of strings 
        // and for any string that
        // contains the substring `q`, 
        // add it to the `matches` array
        $.each(strs, function (i, str) {
            $("#search").val("");
            if (substrRegex.test(str) 
               || q.slice(0, 1) === str.slice(0, 1)) {
                // the typeahead jQuery plugin 
                // expects suggestions to a
                // JavaScript object, refer to 
                // typeahead docs for more info        
                matches.push(name(str));
            }
        });
        cb(matches);
    }(q, cb, function (n) {
        return {
            "content": n
        }
    }));
};

var _matches = $.map($("#content div"), function (v, k) {
    return [v.id]
});

var template = {
    "content": _matches
};
$("#content div:gt(0)").hide(0);
$('#search').focus().keyup(function (e) {
    var search = $(this);
    var _search = search.val();
    if (e.which === 13) {
        substringMatcher(template.content, _search, function (d) {
            $("#" + d[0].content).fadeIn(500).siblings().hide();
            search.val("");
        })
    }
});