如何修改w3schools的ul li搜索代码以支持嵌套ul li结构搜索

核心问题说明 #

原有w3schools代码仅适配单层列表，嵌套场景下会出现「子项匹配但父项被隐藏，导致匹配结果不可见」的问题，我们需要新增递归判断逻辑，只要当前项自身或其任意后代项匹配搜索词，当前项就保留显示。

修改后完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>我的通讯录</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索姓名..." title="输入姓名">

<ul id="myUL">
    <li>
        <a href="#">Adele</a>
        <ul>
            <li>
                <a href="#">Mariam</a>
                <ul>
                    <li>
                        <a href="#">Andreas</a>
                    </li>
                    <li>
                        <a href="#">Dimitru</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Agnes</a></li>
    <li><a href="#">Billy</a></li>
    <li>
      <a href="#">Bob</a>
      <ul>
          <li>
              <a href="#">Alexander</a>
          </li>
      </ul>
    </li>
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Christina</a></li>
    <li><a href="#">Cindy</a></li>
</ul>

<script>
function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();
    var ul = document.getElementById("myUL");
    var allLi = ul.getElementsByTagName("li");

    // 遍历所有层级的li
    for (var i = 0; i < allLi.length; i++) {
        var currentLi = allLi[i];
        // 判断当前li或其后代是否匹配搜索词
        var shouldShow = checkMatch(currentLi, filter);
        currentLi.style.display = shouldShow ? "" : "none";
    }
}

// 递归检查：当前li或其任意后代是否匹配搜索词
function checkMatch(liElement, filter) {
    // 先检查当前li的链接文本
    var aTag = liElement.getElementsByTagName("a")[0];
    var text = aTag.textContent || aTag.innerText;
    if (text.toUpperCase().indexOf(filter) > -1) {
        return true;
    }
    // 再检查所有子层级的li
    var childUls = liElement.getElementsByTagName("ul");
    for (var j = 0; j < childUls.length; j++) {
        var childLis = childUls[j].getElementsByTagName("li");
        for (var k = 0; k < childLis.length; k++) {
            if (checkMatch(childLis[k], filter)) {
                return true;
            }
        }
    }
    return false;
}
</script>

</body>
</html>

修改点说明 #

• 新增了checkMatch递归函数，除了判断当前列表项的文本是否匹配，还会遍历所有子级嵌套列表的项，只要有任意一项匹配，当前父级项就会保留显示
• 兼容任意深度的ul嵌套结构，不需要修改列表的原有结构和样式

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