Как скрыть результаты поиска при очистке в поле ввода ввода? Только JavaScript Пожалуйста

Question

Как очистить результаты поиска при очистке внутри текстового поля ввода? Я пробовал этот ответ на stackoverflow- Как скрыть элементы списка из фильтра поиска, когда очищено поле ввода поиска? . К сожалению, это не работает в этой конкретной кодировке

function myFunction() {
  var query = document.querySelector('#myInput').value;
  
  // this wil grab all <li> elements from all <ul> elements on the page
  // however, you will want to specify a unique attribute for only the elements you wish to include
  var elements = document.querySelectorAll('li');
  

  
  for (var i = 0; i < elements.length; i ++) {
    var el = elements[i];
    if (el.innerText.indexOf(query) !== -1)
      el.style.display = 'block';
    else
      el.style.display = 'none';
  }
  
  
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 10px;
  border: 1px solid #ddd;
}

#myUL, #myUL2 {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  margin-top:10px;
}

#myUL li, #myUL2 li {
  list-style-type: none;
  border: 1px solid #ddd;
  padding:5px;
  background-color: #f6f6f6;
  text-decoration: none;
  font-size: 18px;
  color: black;
  margin-bottom:5px;
}

#myUL li, #myUL2 li {
  display: none;
}

#myUL li a:hover:not(.header), #myUL2 li a:hover:not(.header) {
  background-color: #eee;
}

<h2>
Test Search
</h2>

<p>
How to hide the List items from Search Filter, when search input field is cleared?</p>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search" autocomplete="off">
<ul id="myUL" class="ul1">
  <li><a href="#">bob</a> <div>
  description
  </div>
  
  <div>
  another description
  </div>
  
  </li>
  <li><a href="#">rob</a> ss</li>

  <li><a href="#">tom</a></li>
  <li><a href="#">mark</a></li>
</ul>

<ul id="myUL2" class="ul2">
  <li><a href="#">purse</a></li>
  <li><a href="#">cat</a></li>

  <li><a href="#">pencil</a></li>
  <li><a href="#">sharpner</a></li>
</ul>

Пожалуйста, используйте только JavaScript. Спасибо за любую помощь. С благодарностью.

Answer 1

Вы можете проверить, определено ли query и не пусто ли при отображении или скрытии элемента.

if (query && el.innerText.indexOf(query) !== -1)

Когда поле поиска очищено, query будет пустым, и это условие оценивается как false и все элементы будут скрыты.

Live Пример:

function myFunction() {
  var query = document.querySelector('#myInput').value;
  
  // this wil grab all <li> elements from all <ul> elements on the page
  // however, you will want to specify a unique attribute for only the elements you wish to include
  var elements = document.querySelectorAll('li');
  

  for (var i = 0; i < elements.length; i ++) {
    var el = elements[i];
    if (query && el.innerText.indexOf(query) !== -1)
      el.style.display = 'block';
    else
      el.style.display = 'none';
  }
  
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 10px;
  border: 1px solid #ddd;
}

#myUL, #myUL2 {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  margin-top:10px;
}

#myUL li, #myUL2 li {
  list-style-type: none;
  border: 1px solid #ddd;
  padding:5px;
  background-color: #f6f6f6;
  text-decoration: none;
  font-size: 18px;
  color: black;
  margin-bottom:5px;
}

#myUL li, #myUL2 li {
  display: none;
}

#myUL li a:hover:not(.header), #myUL2 li a:hover:not(.header) {
  background-color: #eee;
}

<h2>
Test Search
</h2>

<p>
How to hide the List items from Search Filter, when search input field is cleared?</p>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search" autocomplete="off">
<ul id="myUL" class="ul1">
  <li><a href="#">bob</a> <div>
  description
  </div>
  
  <div>
  another description
  </div>
  
  </li>
  <li><a href="#">rob</a> ss</li>

  <li><a href="#">tom</a></li>
  <li><a href="#">mark</a></li>
</ul>

<ul id="myUL2" class="ul2">
  <li><a href="#">purse</a></li>
  <li><a href="#">cat</a></li>

  <li><a href="#">pencil</a></li>
  <li><a href="#">sharpner</a></li>
</ul>

Answer 2

Вы можете достичь этого, добавив следующие три строки:

let status = query === "" ? "none" : "block" //If input value is empty, set to "none"
document.querySelector("#myUL").style.display = status;
document.querySelector("#myUL2").style.display = status;

Это будет скрывать оба ваших div'а, когда ваш ввод пуст. В противном случае он всегда будет отображаться.

Посмотрите на новый пример:

function myFunction() {
  var query = document.querySelector('#myInput').value;

  // this wil grab all <li> elements from all <ul> elements on the page
  // however, you will want to specify a unique attribute for only the elements you wish to include
  var elements = document.querySelectorAll('li');

  let status = query==="" ? "none" : "block"
  document.querySelector("#myUL").style.display = status;
  document.querySelector("#myUL2").style.display = status;

  for (var i = 0; i < elements.length; i++) {
    var el = elements[i];
    if (el.innerText.indexOf(query) !== -1)
      el.style.display = 'block';
    else
      el.style.display = 'none';
  }

}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 10px;
  border: 1px solid #ddd;
}

#myUL,
#myUL2 {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  margin-top: 10px;
}

#myUL li,
#myUL2 li {
  list-style-type: none;
  border: 1px solid #ddd;
  padding: 5px;
  background-color: #f6f6f6;
  text-decoration: none;
  font-size: 18px;
  color: black;
  margin-bottom: 5px;
}

#myUL li,
#myUL2 li {
  display: none;
}

#myUL li a:hover:not(.header),
#myUL2 li a:hover:not(.header) {
  background-color: #eee;
}

<h2>
  Test Search
</h2>
<p>
  How to hide the List items from Search Filter, when search input field is cleared?</p>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search" autocomplete="off">
<ul id="myUL" class="ul1">
  <li><a href="#">bob</a>
    <div>
      description
    </div>
    <div>
      another description
    </div>
  </li>
  <li><a href="#">rob</a> ss</li>
  <li><a href="#">tom</a></li>
  <li><a href="#">mark</a></li>
</ul>
<ul id="myUL2" class="ul2">
  <li><a href="#">purse</a></li>
  <li><a href="#">cat</a></li>
  <li><a href="#">pencil</a></li>
  <li><a href="#">sharpner</a></li>
</ul>