需结合HTML、CSS与JavaScript实现搜索框与导航菜单联动：一、监听输入高亮匹配项；二、点击菜单自动填充搜索框；三、搜索触发分组展开；四、用datalist实现自动补全；五、用:focus-within纯CSS展开菜单。
如果您希望在HTML5页面中实现搜索框与导航菜单的联动效果，例如点击菜单项时自动聚焦搜索框、输入关键词后高亮匹配的菜单项，或根据搜索结果动态展开对应菜单分组，则需要结合HTML结构、CSS样式与JavaScript逻辑进行协同设计。以下是实现此功能的具体步骤：
一、使用JavaScript监听搜索输入并高亮匹配菜单项
该方法通过实时监听搜索框的输入事件，在用户键入内容时遍历所有菜单项文本，对包含关键词的菜单项添加高亮类，同时隐藏不匹配项，实现搜索驱动的菜单过滤效果。
1、为搜索框设置id属性，例如<input type="text" id="searchInput" placeholder="搜索菜单...">。
2、为每个菜单项（如<li>或<a>标签）添加统一的class名，例如class="menu-item"，并确保其文本内容可被JavaScript读取。
立即学习“前端免费学习笔记（深入）”；
3、在script标签中编写事件监听器：获取搜索框元素，监听input事件。
4、在事件处理函数中，获取用户输入值并转为小写，遍历所有menu-item元素。
5、对每个menu-item，检查其textContent是否包含搜索关键词（忽略大小写），若匹配则移除hidden类并添加highlight类，否则添加hidden类。
6、定义CSS规则：.highlight { background-color: #e3f2fd; font-weight: bold; }，.hidden { display: none; }。
二、点击菜单项自动填充并聚焦搜索框
该方法用于提升操作连贯性，当用户点击任意菜单项时，将该项文本内容自动填入搜索框，并触发焦点，便于进一步编辑或确认。
1、为每个菜单项添加data-text属性，值为该项显示文本，例如<li data-text="产品中心">产品中心</li>。
2、为搜索框设置id，如id="searchInput"，并确保其type为text。
3、为所有菜单项绑定click事件监听器，使用document.querySelectorAll(".menu-item")获取集合。
4、在点击回调中，读取当前目标元素的data-text属性值。
5、将该值赋给document.getElementById("searchInput").value。
6、调用document.getElementById("searchInput").focus()使光标立即定位到搜索框内。
三、搜索触发对应菜单分组展开
该方法适用于多级折叠菜单结构，当用户在搜索框中输入关键词时，自动展开包含匹配项的父级菜单分组（如<ul class="submenu">），确保目标项可见。
1、为每个子菜单容器（如二级<ul>）添加唯一data-parent-id属性，与其所属的一级菜单项id对应。
2、为每个菜单项添加data-group-id属性，指向其所属子菜单的data-parent-id值。
3、在搜索input事件中，先隐藏所有已展开的子菜单（移除active类或设置display:none）。
4、遍历所有菜单项，查找匹配关键词的项，获取其data-group-id值。
5、根据该值查找对应子菜单元素，并添加active类或设置style.display = "block"。
6、定义CSS：.submenu.active { display: block; }，默认.submenu { display: none; }。
四、使用HTML5 datalist实现搜索框自动补全菜单项
该方法利用HTML5原生datalist元素，将菜单项文本作为搜索框的建议列表，无需JavaScript即可提供下拉式关键词提示，降低开发复杂度。
1、在HTML中添加<datalist id="menuSuggestions"></datalist>标签。
2、遍历所有菜单项文本，为每个非空文本生成<option value="菜单文本"></option>并插入datalist中。
3、将搜索框的list属性设为"menuSuggestions"，例如<input list="menuSuggestions" id="searchInput">。
4、确保菜单项文本已去重且无特殊HTML字符，避免解析异常。
5、注意：datalist仅提供文本匹配提示，不会自动高亮或筛选菜单DOM结构，需配合其他方法实现联动视觉反馈。
五、通过CSS :focus-within 实现搜索框聚焦时展开菜单区域
该方法纯CSS实现，当用户点击或Tab进入搜索框时，利用:focus-within伪类激活父容器内的菜单展开状态，适合一级菜单的轻量联动。
1、将搜索框与菜单容器包裹在同一父元素内，例如<nav class="nav-container"><input><ul class="main-menu"></ul></nav>。
2、为.nav-container设置position: relative;，为.main-menu设置初始状态：opacity: 0; visibility: hidden; transition: all 0.2s;。
3、添加CSS规则：.nav-container:focus-within .main-menu { opacity: 1; visibility: visible; }。
4、确保搜索框可获得焦点（非disabled、非readonly，且tabindex未设为-1）。
5、此方案不依赖JavaScript，但仅适用于同级容器内联动，无法响应搜索内容变化。
