只有兩個單詞匹配時，才採取行動

Question

我有點想法，但我真的不知道如何使它工作，我只有多個方法的片段似乎並不正面。

所以我現在轉向你一瞥輝煌，比方說我有3個內容容器與類： 關於，投資組合和聯繫，關於是可見的，其他兩個隱藏。

我有一個文本框（或搜索框，無論你想調用它）和我想要的是如果我寫（我按下輸入後）我設置的任何一個單詞（在這種情況下：poftfolio ，portofoliu）關於容器fadeOut和投資組合分類容器淡入。同樣的事情會發生和接觸。

我沒有好的想法我怎麼能這樣做... 任何幫助嗎？另外，如果你有一些設置，一個小提琴會真正派上用場，以便清楚瞭解它是如何工作的。

感謝

PS：我能想到的是jQuery的功能。就是最好的功能大概一個 - 一個。是（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

添加到您的所有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...