搜索框必须嵌入navbar-collapse内并作为独立，下拉容器紧贴其子级；聚焦时需监听focusin手动隐藏折叠菜单；禁用overflow:hidden和多余position:relative；键盘导航需手动实现arrowup/down/enter逻辑。
搜索框必须塞进 navbar-collapse 里，否则小屏下建议列表根本不会渲染
Bootstrap 5 的响应式逻辑由 navbar-collapse 控制显隐——它不是单纯 CSS 隐藏，而是 DOM 层面的条件渲染。把搜索框（含 autocomplete 下拉容器）放在 navbar-brand 后面、或和 navbar-nav 并列，小屏折叠后整个结构都不在 DOM 中。用户连输入机会都没有，更别说触发建议了。
正确位置是：作为独立 <li> 嵌入 navbar-collapse 内部，且下拉容器（<div class="dropdown-menu">）必须紧贴该 <code><li> 的子级，不能跨出折叠区域：
<div class="navbar-collapse collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item">Home</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<div class="dropdown">
<input type="search" class="form-control me-2" data-bs-toggle="dropdown"><div class="dropdown-menu p-0 border-0"></div>
</div>
</li>
</ul>
</div>
- 别用
ms-auto包整个<form></form>—— 它会被收进汉堡菜单，用户得先点开才能看到搜索框和建议 - 下拉容器加
data-bs-toggle="dropdown"，让 Bootstrap 的 dropdown JS 自动处理定位、隐藏、焦点链，比手写position: absolute更可靠 - 确保
dropdown-menu父级<div class="dropdown"> 存在，否则 <code>data-bs-toggle不生效input聚焦时不自动收起菜单？必须手动调用bootstrap.Collapse.getInstance().hide()Bootstrap 的
collapse组件默认只响应带data-bs-toggle="collapse"的点击事件，input的focus或click完全不触发关闭逻辑。结果就是：用户点开搜索框 → 键盘弹出 → 折叠菜单还盖在上面 → 输入区域被遮挡。最轻量解法是监听
focusin，主动关闭当前 navbar-collapse：const searchInput = document.querySelector('.navbar-collapse input[type="search"]'); const collapseEl = document.querySelector('.navbar-collapse'); searchInput.addEventListener('focusin', () => { if (collapseEl.classList.contains('show')) { bootstrap.Collapse.getInstance(collapseEl).hide(); } });- 用
focusin而非focus—— 它能冒泡，兼容嵌套结构；blur不可靠，用户切 App 后菜单会卡住 - 检查
classList.contains('show')再调用hide()，避免对已收起状态重复操作报错 - 不要给
input加data-bs-toggle="collapse"—— 它会和data-bs-toggle="dropdown"冲突，导致建议列表无法展开
下拉建议列表被截断？禁用父容器的
overflow: hidden和position: relative常见现象：建议列表在小屏下只显示顶部几行，或者干脆被砍掉一半。根源是
navbar-collapse或其父级默认有overflow: hidden，而dropdown-menu的position: absolute会被裁剪。解决办法不是硬调
z-index，而是解除限制：- 给
navbar-collapse加style="overflow: visible"（或覆盖 CSS：.navbar-collapse { overflow: visible !important; }） - 移除
navbar-nav或nav-item上多余的position: relative—— dropdown 定位依赖最近的position: relative祖先，错配会导致偏移 - 下拉容器用
class="dropdown-menu dropdown-menu-end p-0"，避免默认min-width撑宽；短文本建议加style="min-width: auto"
注意：这些修改只影响小屏，桌面端不受影响，因为大屏下
navbar-collapse本就不折叠，overflow限制自然失效。键盘导航支持要自己写，
↑ ↓ Enter不能靠 Bootstrap 自带逻辑Bootstrap 的 dropdown JS 不接管
input内部的键盘事件，上下键默认滚动页面，Enter 提交表单，完全不联动建议项。必须手动实现：let activeIndex = -1; searchInput.addEventListener('keydown', e => { const items = document.querySelectorAll('.dropdown-menu .suggestion-item'); if (!items.length) return; <p>if (e.key === 'ArrowDown') { e.preventDefault(); activeIndex = Math.min(activeIndex + 1, items.length - 1); } else if (e.key === 'ArrowUp') { e.preventDefault(); activeIndex = Math.max(activeIndex - 1, 0); } else if (e.key === 'Enter' && activeIndex >= 0) { e.preventDefault(); items[activeIndex].click(); } else if (e.key === 'Escape') { searchInput.blur(); }</p><p>items.forEach((item, i) => { item.setAttribute('tabindex', i === activeIndex ? '0' : '-1'); item.classList.toggle('active', i === activeIndex); }); });</p>- 每个建议项必须加
tabindex="-1"，否则.focus()无效；高亮项设为tabindex="0"才能被键盘聚焦 - 用
preventDefault()拦住默认行为，否则 ArrowDown 会滚页面，Enter 会提交表单 - 不要依赖
focus()切换高亮 —— 移动端软键盘可能打断焦点，直接操作tabindex和class更稳
真正麻烦的不是代码量，是 iOS Safari 对
tabindex和focus()的静默失效 —— 得靠tabindex="-1"+aria-current="true"双保险，否则屏幕阅读器读不出当前选中项。 - 用
