我想在搜索文本时隐藏h4标题。我能够进行搜索，但也想隐藏h4。
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<h4>Name List 1</h4>
<ol id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Bob</a></li>
</ol>
<h4>Name List 2</h4>
<ol id="myUL2">
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
</ol>
<h4>Name List 3</h4>
<ol id="myUL3">
<li><a href="#">Anim</a></li>
<li><a href="#">Bitto</a></li>
<li><a href="#">Cindy</a></li>
</ol>
我有如下所述的搜索选项。
function myFunction() {
var input, filter, ol, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
li = document.querySelectorAll("ol li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function myFunction() {
var input, filter, ol, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
li = document.querySelectorAll("ol li");
var parent;
var sibiling;
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
Array.prototype.forEach.call(document.getElementsByTagName("h4"), function(el) {
el.style.display = '';
});
} else {
li[i].style.display = "none";
Array.prototype.forEach.call(document.getElementsByTagName("h4"), function(el) {
el.style.display = 'none';
});
}
}
}<html>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<h4>Name List 1</h4>
<ol id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Bob</a></li>
</ol>
<h4>Name List 2</h4>
<ol id="myUL2">
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
</ol>
<h4>Name List 3</h4>
<ol id="myUL3">
<li><a href="#">Anim</a></li>
<li><a href="#">Bitto</a></li>
<li><a href="#">Cindy</a></li>
</ol>
</body>
</html>检查是否符合预期。
function myFunction() {
let input, filter, ol, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
h4 = document.querySelectorAll("h4");
for (let j = 0; j < h4.length; j++) {
let isEmpty = true;
const neighbour_ol = h4[j].nextElementSibling;
li = neighbour_ol.querySelectorAll("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
isEmpty = false;
} else {
li[i].style.display = "none";
}
}
if (isEmpty) h4[j].style.display = "none";
else h4[j].style.display = "";
}
}
检查出来！（但我建议使用“ forEach”循环）