JS代码只过滤列表的前10个元素[solved]

Question

下面的代码应该过滤并只显示与我键入的输入匹配的项。但它只过滤前10个选项。其余的总是可见的。

(编辑:这是第11个<li>元素的一个错别字，</li>不是以/结尾)

js:

function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
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";
}
}
}

html:

<div class="row">
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Paieška" title="Type in a category">
<ul id="myMenu">
<li><a href="#">Option1</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">abcde</a></li>
<li><a href="#">monday</a></li>
<li><a href="#">tuesday</a></li>
<li><a href="#">wednesday</a></li>
<li><a href="#">thrusday</a></li>
<li><a href="#">friday</a></li>
<li><a href="#">saturday</a><li>
<li><a href="#">sunday</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">iii</a></li>
<li><a href="#">12345</a></li>
<li><a href="#">qwerty</a></li>
</ul>
</div>

Answer 1

你额外的<li>标签被浏览器渲染为一个空的<li>元素(即<li></li>)。因此，当for循环遍历它时，以下行会失败:

a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {

因为空的li元素不包含a元素，因此a变量是未定义的，导致a.innerHTML抛出错误(因为您不能访问未定义值的属性)。

Answer 2

虽然在</li>上没有关闭标签有时是有效的，这可能会挑战代码-一个原因是永远不要省略<li>,<p>等允许这样做的东西在这里，我更新为使用关闭选项卡在那些没有它。

超出范围，但我也更新了脚本，以说明返回未定义的缺失元素(例如缺少<a>)

function myFunction() {
let input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
let a = li[i].getElementsByTagName("a")[0];
if (!!a && a.innerHTML != "" && a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}

a { color: white }

<div class="row">
<div class="left" style="background-color:#2D2D2D; color: white;">
<h2>***PAVADINIMAS***</h2>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Paieška" title="Type in a category">
<ul id="myMenu">
<li><a href="#">Option1</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">abcde</a></li>
<li><a href="#">monday</a></li>
<li><a href="#">tuesday</a></li>
<li><a href="#">wednesday</a></li>
<li><a href="#">thrusday</a></li>
<li><a href="#">friday</a></li>
<li><a href="#">saturday</a>
</li><li></li>
<li><a href="#">sunday</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">iii</a></li>
<li><a href="#">12345</a></li>
<li><a href="#">qwerty</a></li>
</ul>
</div>