在输入搜索框中清除时如何隐藏搜索结果？请仅使用 JavaScript

Question

在输入文本框内清除时如何清除搜索结果？我已经在 stackoverflow-How to hide the List items from Search Filter, when search input field is cleared? 上尝试过这个答案。不幸的是，它不适用于这种特定的编码

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，所有元素都将被隐藏。

实例：

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>

Answer 3

您可以在应用决定要显示哪些元素的过滤器逻辑之前重置所有元素。这是一个例子：

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>

此示例使用数组filter() 和forEach() 方法。您可以分别了解here 和here。否则，请随意使用您的循环。