Question

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

当我输入包含在我的textentries中的单词（或其中的一部分）时，过滤（通过display: block和display: none）我的textentries（包含每个textentries的div容器）。空搜索框应显示所有条目。

我知道我需要在这里使用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/

您还可以添加＆＃34;输入＆＃34;监听文本输入元素以在输入时过滤结果。

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

在textentries中实时搜索[仅限JS]

1 个答案: