带下拉列表的搜索栏异常：输入内容仅显示Dropdown，无法检索下拉项

问题根源 #

1. HTML结构不规范：<ul>的直接子元素只能是<li>，你把<button>和<div>直接放在<ul>里，既不符合语义规范，也导致后续JS无法正确遍历到下拉内的选项。
2. JS搜索范围受限：原代码用ul.getElementsByTagName("li")仅能获取<ul>的直接子<li>，而下拉容器里的<li>嵌套在<div>中，不在遍历范围内，自然不会被搜索到。

修复步骤与代码 #

修正后的HTML结构

把下拉按钮和下拉容器统一包裹在一个<li>内，符合列表的语义规范：

<div class="sidenav">
  <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
  <ul id="myMenu">
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#clients">Clients</a></li>
    <li><a href="#contact">Contact</a></li>
    <!-- 将下拉按钮和容器包裹在同一个li中 -->
    <li>
      <button class="dropdown-btn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-container">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </div>
    </li>
    <li><a href="#contact">Search</a></li>
  </ul>
</div>

修正后的JavaScript代码

使用querySelectorAll("#myMenu li")获取<ul>下所有层级的<li>，确保下拉内的选项被纳入搜索范围：

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  // 搜索ul下所有层级的li元素
  li = ul.querySelectorAll("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].querySelector("a");
    if (a && a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

额外说明 #

• 修正HTML结构后，不仅解决了搜索问题，也让页面结构更符合W3C规范，避免潜在的渲染异常。
• 使用querySelectorAll替代getElementsByTagName，可以更灵活地选择DOM元素，适配嵌套结构的场景。

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