скрыть h4 при поиске текста - PullRequest
Новая
       40

скрыть h4 при поиске текста

2 голосов
/ 27 мая 2020

У меня есть поисковый скрипт для фильтрации текста, но я хотел скрыть h4, который находится в верхней части ever ol. Как скрыть то же самое?

Что происходит, текст фильтрует поиск, но мы все еще можем видеть h4 (который должен был быть скрытым)

Снимок экрана вывода 

  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>

1 Ответ

1 голос
/ 28 мая 2020

Надеюсь, это решит ваш вопрос. Я скрываю h4 всякий раз, когда ввод для поиска длиннее 1. Если вы удалите поиск, заголовки h4 отобразятся снова. Не стесняйтесь изменить условие, чтобы скрыть заголовки, чтобы они были понятны вам (возможно, щелкнув за пределами поля поиска и т.д. c).

С уважением, Пол

Изменить:

Я не понял часть, касающуюся братьев, сестер и родителей, поэтому я прокомментировал это. Но вроде все равно работает;) 

      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>
...