javascript - 文本条目中的实时搜索 [仅限 JS]

Question

我需要你的帮助来编写 JavaScript。它需要做的是:

• 当我键入文本条目中包含的单词(或其一部分)时，过滤(按 display: block 和 display: none )我的文本条目(包含每个文本条目的 div 容器)。空搜索框应显示所有条目。

我知道我需要在这里使用 RegEx 和 InnerHTML。有人知道如何写这样的东西吗？我只能使用手写的 JavaScript(没有现成的解决方案，也没有 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/