javascript - 在 中搜索文本

Question

我试图在单个 HTML5 页面上搜索 EACH，如果没有匹配项则隐藏。我“差不多”了，但还没到那儿。到目前为止，如果有单个字符的匹配项，我的将消失，但如果我键入其他任何内容，则会重新出现。另外，如果我清除搜索框，我希望页面重置。如果您的 Java 人员可以看一看，我们将不胜感激。

function myFunction() {
    input = document.getElementById("Search");
    filter = input.value.toUpperCase();
    for (i=0; i<document.getElementsByClassName('target').length; i++){
if(document.getElementsByClassName('target'[i].innerHTML.toUpperCase().indexOf(filter) > -1) {     
    document.getElementsByClassName("target")[i].style.display = "none";
            }
        else{
        	document.getElementsByClassName("target")[i].style.display = "";
        } 
    }
}
    </script>

    <table align="center" width="20%">
    <tr>
      <td style="padding-right: 10px">
        <input type="text" id="Search" onkeyup="myFunction()" 
        placeholder="Please enter a search term.." title="Type in a name">
      </td>
    </tr>
    </table>
    <br>


    <div class="target">
    This is my DIV element.
    </div>
    <div class="target">
    This is another Div element.
    </div>

Answer 1

给你。使用符合您需要的 includes 方法。

function myFunction() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      nodes[i].style.display = "block";
    } else {
      nodes[i].style.display = "none";
    }
  }
}

<table align="center" width="20%">
  <tr>
    <td style="padding-right: 10px">
      <input type="text" id="Search" onkeyup="myFunction()" placeholder="Please enter a search term.." title="Type in a name">
    </td>
  </tr>
</table>
<br>


<div class="target">
  This is my DIV element.
</div>
<div class="target">
  This is another Div element.
</div>
<div class="target">
  Can you find me?
</div>