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

问题描述 投票:3回答:3

[清除输入文本框内的内容时如何清除搜索结果?我已经在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。感谢您的协助。非常感谢。

javascript list search filter listitem
3个回答
2
投票

显示或隐藏元素时,您可以检查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>

1
投票

您可以通过添加以下三行来实现:

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>

1
投票

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

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()方法。您可以分别了解那些herehere。否则,请随意使用循环。

© www.soinside.com 2019 - 2024. All rights reserved.