0

我在编写 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。

4

1 回答 1

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/

于 2015-08-10T10:02:56.357 回答