在搜索文本时隐藏 h4

Question

我有用于过滤文本的搜索脚本，但想隐藏位于 ever ol 顶部的 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 headers 会再次显示。随意更改条件以将 headers 隐藏到对您有意义的位置（也许在搜索字段外单击等）。

最好的，保罗

编辑：

我不明白兄弟姐妹和 parents 的部分，所以我把它注释掉了。但它似乎仍然有效 ;)

      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>

在搜索文本时隐藏 h4

hide h4 on search of text

javascript

html

hide