How to hide search results when clearing out in the input search box? JavaScript Only Please

Question

How do you clear search results when clearing out inside the input text box? I have tried this answer on stackoverflow- How to hide the List items from Search Filter, when search input field is cleared?. Unfortunately, it does not work in this particular coding

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>

Please use JavaScript only. Thank you for any assistance. Greatly appreciated.

Answer 1

You can reset all of the elements before applying your filter logic that decides which elements to show. Here's an example:

function myFunction() {
  var query = document.querySelector('#myInput').value;
  var elements = Array.from(document.querySelectorAll('li'));
  
  // Reset all the elements.
  elements.forEach(li => li.style.display = 'none');
  
  // Show the elements that contain the query text.
  elements
    .filter(li => query && li.innerText.indexOf(query) >= 0)
    .forEach(li => li.style.display = 'block'); 
}

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

This example uses the array filter() and forEach() methods. You can learn about those here and here, respectively. Otherwise, feel free to use your loop.

Answer 2

You can achieve this by adding this three lines:

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;

This will hide both of your divs whenever your input is empty. Otherwise, it will always be shown.

Look at the new example:

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>

Answer 3

You can check if query is defined and not empty when displaying or hiding an element.

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

When search box is cleared, query will be empty and this condition evaluates to false and all elements will be hidden.

Live Example:

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>