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

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" autoplete="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>

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" autoplete="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.

Share Improve this question asked Oct 9, 2019 at 14:35 Michelle Do 435 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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" autoplete="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>

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" autoplete="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>

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" autoplete="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.

Programmer puzzle solving

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

3 Answers 3

Articles related to this article

comment list (0)