仅当两个词匹配时才采取行动

Question

我有一个想法，但我真的不知道如何让它发挥作用，我只有多种方法的片段，似乎并没有正面交锋。

所以我向您求助，让我们一睹为快，假设我有 3 个带有 class 的内容容器： about、portfolio 和 contact，about 是可见的，另外两个是隐藏的。

我有一个文本框（或搜索框，无论你想怎么称呼它），我想要的是如果我写（并在按下 Enter 后）我设置的多个单词中的任何一个（在本例中为：poftfolio， portofoliu) about 容器要淡出，投资组合分类容器要淡入。 about 和 contact 也是如此。

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

谢谢

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

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

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

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

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

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

JSFIDDLE

Answer 1

试试

html

<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>

js

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("");
        })
    }
});

jsfiddle http://jsfiddle.net/guest271314/2na7dyjf/

另见typeahead.js - examples

Answer 2

jsFiddle demo

将hidden 类添加到所有DIV 元素中

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

试试这个：

$(".hidden").hide();

var searchID = "";

$('#search').keyup(function( e ) {
    searchID = $.trim( this.value.toLowerCase() );
    if( searchID && e.which===13){
       $(".hidden").hide();
       $('[id='+  searchID  +']').show();
    }
});

编辑：如果您想确保您的目标是严格使用小写的ID，只需添加.toLowerCase()

如果您想让上述内容不那么严格，您可以尝试其他选择器，而不是仅使用 [id=：

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