为何我的JavaScript输入过滤代码仅能筛选前10个选项？

核心问题：HTML标签语法错误 #

你的代码里存在未闭合标签和冗余空标签，导致DOM结构异常：

• 第10个选项（saturday）的<li>未添加闭合标签</li>
• 紧接着多了一个无内容的空<li>标签

浏览器解析HTML时会自动修复语法错误，但这种修复会让sunday、test2等后续<li>被嵌套到未闭合的saturday标签内部，不再是<ul>的直接子元素。你的JS代码通过ul.getElementsByTagName("li")获取的元素集合中，后续嵌套的<li>不会被正确遍历处理——它们的display属性始终保持默认的显示状态，自然不会被过滤规则影响。

修复步骤 #

修改HTML的<ul>部分，补全闭合标签并删除冗余空标签：

<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>

可选优化：让代码更健壮 #

可以改用querySelectorAll明确获取<ul>的直接子<li>，避免嵌套元素干扰，同时简化代码逻辑：

function myFunction() {
  const input = document.getElementById("mySearch");
  const filter = input.value.toUpperCase();
  const lis = document.querySelectorAll("#myMenu > li");
  
  for (const li of lis) {
    const aText = li.querySelector("a").textContent.toUpperCase();
    li.style.display = aText.includes(filter) ? "" : "none";
  }
}

内容的提问来源于stack exchange，提问作者user19964717