HTML不提供菜单搜索功能，需用JavaScript实现；应采用语义化<ul><li>结构并用data-label标注可搜索文本，配合filter()和includes()进行大小写不敏感匹配，注意缓存DOM元素、防抖及无障碍支持。
HTML 本身不提供菜单搜索或快速定位功能——这是 JavaScript 的职责。纯 HTML 只能静态渲染菜单结构，搜索交互必须靠 JS 实现，且需配合合理的 DOM 结构和事件处理。
菜单 DOM 结构怎么写才方便搜索
搜索的前提是能遍历、匹配、高亮目标项。建议用语义化、扁平化的 <ul><li> 结构，每个菜单项用 data-label 或 aria-label 显式声明可搜索文本（避免依赖 innerText 抽取）：
<ul id="menu"> <li data-label="用户管理"><a href="/users">? 用户管理</a></li> <li data-label="权限配置"><a href="/perms">? 权限配置</a></li> <li data-label="系统日志"><a href="/logs">? 系统日志</a></li> </ul>
- 不用
<div>套菜单项——会增加 JS 查询复杂度 - 避免在
data-label中塞 HTML 标签或换行符，否则模糊匹配易出错 - 如果菜单含子菜单（如折叠面板），需提前决定是否支持搜索子项：若支持，子项也得有独立
data-label；若不支持，加data-searchable="false"并在 JS 中跳过
用 Array.prototype.filter() + String.includes() 做基础搜索
这是最轻量、兼容性最好的方案（IE9+ 支持）。核心逻辑是：获取所有 <li>，读取 data-label，判断是否包含输入关键词：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const menu = document.getElementById('menu');
const items = menu.querySelectorAll('li');
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
const keyword = searchInput.value.trim().toLowerCase();
items.forEach(item => {
const label = item.dataset.label?.toLowerCase() || '';
item.style.display = keyword && !label.includes(keyword) ? 'none' : '';
});
});
- 注意用
item.dataset.label而非item.textContent——后者会混入图标符号、空格、链接文字冗余内容 -
keyword为空时，要恢复所有display（不能只设''，因为可能之前被设为block或flex） - 大小写敏感问题：统一转
toLowerCase()处理，比正则更稳
搜索不到时显示提示，以及性能边界要注意什么
用户输错词或菜单无匹配项时，应明确反馈，而不是让页面“静默失败”：
立即学习“前端免费学习笔记（深入）”；
const noResult = document.getElementById('no-result');
// 在 filter 后添加：
if (keyword && Array.from(items).every(item => !item.dataset.label?.toLowerCase().includes(keyword))) {
noResult.style.display = 'block';
} else {
noResult.style.display = 'none';
}
- 不要在每次
input事件里重复调用querySelectorAll——它开销不小，应在初始化时缓存items - 菜单项超过 200 条时，
filter()+forEach()仍够用；但若达上千条，建议加防抖（setTimeout延迟 200ms 执行）避免卡顿 - 别用
innerHTML动态重绘整个菜单——会丢失已绑定的事件（比如点击跳转）、破坏焦点状态、触发重排
真正难的不是写搜索逻辑，而是菜单结构是否预留了可搜索锚点、是否考虑了键盘导航（Tab / Enter 触发）、以及搜索后如何让屏幕阅读器感知到变化（需要 aria-live）。这些细节不处理，功能就只是“能动”，不是“可用”。
