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

Action taking course only if two words match

本文关键字：单词匹 两个      更新时间：2023-09-26

我有点想法，但我真的不确定如何使其工作，我只有多个方法的片段，这些片段似乎没有正面交锋。

所以我转向你看一眼精彩，假设我有3个带类的内容容器：about、公文包和联系人，about是可见的，其他两个是隐藏的。

我有一个文本框（或搜索框，你想怎么称呼它都可以），我想要的是，如果我写下（在我按enter键后）我设置的许多单词中的任何一个（在本例中：poftfolio，portofoliu），about容器要fadeOut，portfolio类容器要fade in。关于和联系也是如此。

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

感谢

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

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

$("#portfolio").hide();
$("#wrong").hide();
$('#search').keyup(function() {
    if ($("#portfolio").is("#search")) {
    $("#portfolio").fadeIn();
}else{
    $("#wrong").fadeIn();
}
});

JSFIDDLE

尝试

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

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

请参阅，也可键入ahead.js-示例

jsFiddle演示

在所有DIV元素中添加一个hidden类

<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...
相关文章：