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

Question

在输入文本框内清除时如何清除搜索结果？我已经在堆栈溢出上尝试了这个答案 - 清除搜索输入字段时，如何从搜索过滤器中隐藏列表项？不幸的是，它不适用于此特定编码

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()方法。您可以分别在此处和此处了解这些内容。否则，请随意使用您的循环。