Live Search in textentries [JS ONLY]

Question

Мне нужна ваша помощь в написании JavaScript. Что нужно сделать, это:

• фильтр (по display: block и display: none) моим textentries (Div контейнеров с каждым textentries), когда я ввожу слово (или его часть), что содержащееся в моих textentries. Пустое поле поиска должно показывать все записи.

Я знаю, что мне нужно использовать здесь RegEx и InnerHTML. Кто-нибудь знает, как написать что-то подобное? Я не могу использовать ничего, кроме рукописного JavaScript (без готового решения и NO JQuery).

Мой HTML:

<article id="content"> <form action="#" id="search"> <input type="search" id="filterTxt" placeholder="Filter entries"/> <input type="button" class="startSearch" value="Search"></form> <div id="entry1"> <p>Lorem ipsum dolor sit amet</p> </div> <div id="entry2"> <p>At vero eos et accusam et justo</p> </div> <div id="entry3"> <p>Stet clita kasd gubergren</p> </div> </article>

Когда я ввожу в строку поиска слово (или его часть), содержащегося в div#entry1, я хочу div#entry2 и div#entry3, чтобы исчезнуть display: none.

Answer 1

Вот решение:

var input = document.getElementById("filterTxt"); 
var searchBtn = document.getElementsByClassName("startSearch")[0]; 
var entries = document.getElementsByClassName("entry"); // don't forget to add class 'entry' to your divs 

searchBtn.addEventListener("click", function(){ 
    var val = input.value; 
    for (var i=0, l=entries.length; i<l; i++) { 
     var entryText = entries[i].getElementsByTagName("p")[0].innerHTML; 
     if (entryText.toLowerCase().indexOf(val.toLowerCase()) != -1) entries[i].style.display = "block"; // add toLowerCase method to ignore case 
     else entries[i].style.display = "none"; 
    } 
}, false) 

http://jsfiddle.net/2w9kpgft/1/

Вы можете также добавить «вход» слушателя к вашему входному элементу текста, чтобы отфильтровать результаты на входе.

http://jsfiddle.net/2w9kpgft/2/