原生 bootstrap 不支持搜索建议功能，必须用 js 实现下拉逻辑；需用 position: absolute 定位列表并避免父容器 overflow: hidden；键盘导航需手动监听 arrowup/arrowdown 并管理 activeindex；移动端用 mousedown 防 blur 抢先；列表 dom 必须初始存在。

原生 Bootstrap 不提供搜索建议（autocomplete）功能，form-control 只负责样式，必须靠 JS 实现下拉建议逻辑，否则用户输完还得手动点选、无法键盘导航、小屏下列表被裁剪——这些不是“体验问题”，是功能不可用。

为什么不能直接在 input-group 里塞 dropdown-menu

常见错误是把 <ul class="dropdown-menu"></ul> 写在 input-group 内部，结果：

• dropdown-menu 被父容器的 overflow: hidden 截断，尤其在 navbar 或 offcanvas 中
• Bootstrap 的 dropdown JS 不接管 input 的 keydown 事件，↑↓ 键完全没反应
• 移动端点击建议项时，blur 先于 click 触发，选项瞬间消失
• 不加 position: absolute 定位，列表会随输入框流式换行或撑开布局

怎么让建议列表在所有断点下都完整显示

核心是脱离文档流 + 避免父容器干扰：

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

• 下拉容器必须用 position: absolute + top: 100% + left: 0，且父级不能设 overflow: hidden 或 position: relative（navbar、offcanvas 默认有）
• 在 navbar 中，给搜索框父容器加 position: static 临时解除限制；或改用 data-bs-toggle="dropdown" + dropdown-menu 类，让 Bootstrap 的 dropdown JS 自动处理定位和隐藏
• 响应式断点（如 @media (max-width: 768px)）下，别把搜索框塞进折叠菜单里——用户得先点三次（展开 → 找搜索 → 输入），应提至 navbar 顶层
• dropdown-menu 默认有 min-width: 10rem，建议项文字短时加 style="min-width: auto" 防撑宽

键盘导航必须手动实现，不能依赖 Bootstrap dropdown

Bootstrap 的 dropdown JS 不监听 input 内的上下键，必须自己写：

• 维护一个 activeIndex 状态变量，监听 keydown 中的 ArrowUp/ArrowDown
• 每次更新前，给当前高亮项设 tabindex="-1" 并调用 .focus()（不能只靠 CSS 高亮）
• Enter 或 Tab 时，把 textContent 插入 input.value 并 blur()；Escape 清空高亮并 blur()
• 避免用 innerHTML 匹配建议项，只比对 textContent，否则带图标或 badge 的项会误匹配 HTML 标签

性能和兼容性容易踩的坑

本地数组建议控制在 50 条以内，后端请求需处理 loading 和空状态：

• 用 input 事件节流（如 setTimeout + clearTimeout），避免每敲一个字都触发 filter()
• 建议项超过 200 条时，用 style.display = "none" 切换显隐，别 remove() 或重写 innerHTML——焦点、A11Y 属性、键盘导航全丢
• 移动端点击建议项，用 mousedown 替代 click 绑定，防止 blur 抢先触发
• 如果用 fetch 请求后端，空结果时要清空旧列表，否则残留上一次的建议

最常被忽略的是：建议列表的 DOM 必须在页面加载时就存在，不能等第一次输入再动态 appendChild——否则 Safari 下首次聚焦会闪退、键盘弹出失败。定位、事件绑定、初始状态，三者缺一不可。