HTML文本JS搜索功能异常求助：部分标题子项无法正常显示

开发了一个JS搜索函数，用于检索HTML中的硬编码文本内容，用户可通过搜索框输入子项内的任意文本（示例：If remote support fails, MIS may request the user to bring their PC to MIS department for further rectification if required.）。当前代码可部分运行，但存在异常：搜索“General IT Policy”时其所有子项可正常显示，但其他标题（如“Naming Convention”）无法实现该效果。

原代码存在两个核心问题：

• 仅遍历主li下的<span>元素，未包含子列表（嵌套ol/li）中的文本内容；
• 遍历逻辑错误：每检查一个span就直接切换显示状态，若第一个span不匹配则直接隐藏主li，不会继续检查后续元素或子项文本。

function searchCont() {
    const input = document.getElementById("searchInput2");
    const filter = input.value.trim().toUpperCase();
    const mainList = document.querySelector(".middle");
    const mainItems = mainList.querySelectorAll("li");

    mainItems.forEach(item => {
        // 获取当前主项的全部文本内容（包含所有子元素）
        const fullContent = item.textContent.toUpperCase();
        // 空搜索框显示所有项，否则匹配关键词
        item.style.display = (filter === "" || fullContent.includes(filter)) ? "" : "none";
    });
}

• 使用querySelectorAll精准获取.middle下的主li元素，避免嵌套li的干扰；
• 直接获取主li的全部文本内容，覆盖所有子元素（包括子列表、span、div等）的文本，确保搜索范围完整；
• 调整逻辑：先判断搜索框是否为空，为空则显示所有项；否则检查文本是否包含关键词，匹配则显示，不匹配则隐藏，确保所有符合条件的主项都能正确展示。

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