Действие происходит только в том случае, если два слова соответствуют

Question

У меня есть идея, но я действительно не уверен, как заставить ее работать, у меня есть только фрагменты нескольких методов, которые, похоже, не идут вперёд.

Так что я обращаюсь к вам с блеском, допустим, у меня есть 3 контейнера контента с классом: о, портфолио и контакте, о видимом и двух других скрыты.

У меня есть текстовое поле (или поле поиска, все, что вы хотите назвать), и что я хочу, если я напишу (и после того, как я нажму кнопку ввода) любое из нескольких слов, которые я установил (в данном случае: poftfolio , portofoliu) о контейнере для fadeOut и контейнере с классом портфолио для fadeIn. То же самое касается и контакта.

У меня нет хорошей идеи о том, как я мог это сделать ... Любая помощь? Кроме того, если у вас есть что-то настроенное, скрипка действительно пригодится, чтобы получить четкое представление о том, как это работает.

Благодаря

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

Edit: Если вы хотите, чтобы убедиться, что вы ориентируетесь на ID строго в нижнем регистре, просто добавьте .toLowerCase()

Если вы хотите сделать более менее строги, вместо того чтобы использовать только [id= вы можете попробовать другие селекторы, как:

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