在文本搜索时隐藏h4

Question

我有用于过滤文本的搜索脚本，但想隐藏h4，它位于任何其他语言的顶部。如何隐藏相同的内容？

正在发生的事情是文本过滤了搜索，但是我们仍然可以看到h4（应该隐藏在其中）

Screen shot of output

  function myFunction() {
      var input, filter, ol, li, a, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      li = document.querySelectorAll("ol li");
      var parent;
      var sibiling;
      for (i = 0; i < li.length; i++) {

          a = li[i].getElementsByTagName("a")[0];
          txtValue = a.textContent || a.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
          } else {
              li[i].style.display = "none";
              parent = li[i].parentElement;
              //console.log(parent);
              sibiling = parent.previousElementSibling;
              //console.log(sibiling);
              sibiling.style.display = "none";
          }
      }
  }

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    
    <h4>Name List 1</h4>
    <div class="basic_forms" id="basic_forms1">
    <ol id="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Bob</a></li>
    </ol>
    
    <h4>Name List 2</h4>
    <div class="basic_forms" id="basic_forms2">
    <ol id="myUL2">
      <li><a href="#">Agnes</a></li>
      <li><a href="#">Billy</a></li>
    </ol>
    
    <h4>Name List 3</h4>
    <div class="basic_forms" id="basic_forms3">
    <ol id="myUL3">
      <li><a href="#">Anim</a></li>
      <li><a href="#">Bitto</a></li>
      <li><a href="#">Cindy</a></li>
    </ol>

Answer 1

我希望这能解决您的问题。每当搜索输入超过1时，我都会隐藏h4。如果删除搜索，则会再次显示h4标头。随意更改条件以将标题隐藏为您认为有意义的标题（也许在搜索字段之外单击，等等）。

最好，保罗

编辑：

我不了解兄弟姐妹和父母的那部分，因此我将其注释掉。但这似乎仍然有效;）

      function myFunction() {
          var input, filter, ol, li, a, i, txtValue, parent, sibiling, h4;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          li = document.querySelectorAll("ol li");
          
          h4 = document.querySelectorAll("h4");
          // console.log(filter);
          if(filter.length > 0){
            h4.forEach(el => {
              el.style.display = "none";
            });
          }else{
            h4.forEach(el => {
                el.style.display = "block";
            });
          }
          for (i = 0; i < li.length; i++) {
              a = li[i].getElementsByTagName("a")[0];
              //console.log(a);
              txtValue = a.textContent || a.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                  li[i].style.display = "";
              } else {
                  li[i].style.display = "none";
                  parent = li[i].parentElement;
                  /* 
                  console.log(parent);
                  sibiling = parent.previousElementSibling;
                  //console.log(sibiling);
                  sibiling.style.display = "none";
                  */
              }
          }
      }

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
        
        <h4>Name List 1</h4>
        <div class="basic_forms" id="basic_forms1">
        <ol id="myUL">
          <li><a href="#">Adele</a></li>
          <li><a href="#">Bob</a></li>
        </ol>
        
        <h4>Name List 2</h4>
        <div class="basic_forms" id="basic_forms2">
        <ol id="myUL2">
          <li><a href="#">Agnes</a></li>
          <li><a href="#">Billy</a></li>
        </ol>
        
        <h4>Name List 3</h4>
        <div class="basic_forms" id="basic_forms3">
        <ol id="myUL3">
          <li><a href="#">Anim</a></li>
          <li><a href="#">Bitto</a></li>
          <li><a href="#">Cindy</a></li>
        </ol>