我有以下代码,问题是当我搜索“ Billy”时,我得到了所有三个“ Billy”,这正是我所期望的。
但是,当我搜索“鲍勃”时,我只有两个父级“鲍勃”。为什么搜索循环仅在每个级别的Bill中而不是Bob进行搜索?
现在,现在只有一个子列表,这将增加到很多。我想要的是在所有级别执行搜索
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li>
<ul>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
</ul>
</li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
</ul>
答案 0 :(得分:1)
隐藏元素时,您需要考虑嵌套的li
。现在,如果您看到a.innerHTML
返回的值,您会发现它由于嵌套而获得Billy的4倍。结果,当您隐藏父项li
的Billy被首先击中时,包含Bob的子项li
也会被隐藏。
修改了代码段以引用a
的父级,而不是直接查看所有li
标签。
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
a.parentElement.style.display = "";
} else {
a.parentElement.style.display = "none";
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li>
<ul>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><ul><li><a href="#">Bob</a></li>
<li><a href="#">Billy</a></li>
</ul></li>
</ul>
</li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
</ul>
答案 1 :(得分:1)
function myFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var ul = document.getElementById("myUL");
var li = ul.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
var name = li[i].innerHTML;
var parent =li[i].parentElement;
if(parent.tagName == "UL"){
if (name.toUpperCase().indexOf(filter) >= 0) {
li[i].style.display = '';
}
else{
li[i].style.display = 'none';
}
}
}
}