Bootstrap搜索框需用JS实现autocomplete，推荐position: absolute定位下拉列表、节流input事件、控制建议数≤50条；响应式下避免overflow:hidden截断，键盘导航需手动实现activeIndex和tabindex="-1"。
搜索框如何绑定 autocomplete 数据源
bootstrap 本身不提供原生的搜索建议（autocomplete）功能，bootstrap 的 form-control 只负责样式，实际建议逻辑得靠 js 实现。常见做法是用 type="search" 输入框 + 自定义下拉列表，或集成轻量库如 awesomplete、simple-autocomplete，避免引入完整框架（比如 jquery ui）增加体积。
关键点：下拉容器必须脱离输入框 DOM 流，否则响应式折叠时可能被裁剪；推荐用 position: absolute + top: 100% 定位，并监听 input 事件节流触发请求或匹配本地数组。
- 本地建议数组建议控制在 50 条以内，否则
filter()慢且影响 typing 流畅度 - 若用 fetch 请求后端，需处理 loading 状态和空结果，避免用户看到残留旧建议
- 移动端点击建议项时，
blur可能先于click触发，导致选项丢失 —— 推荐用mousedown替代click绑定
响应式断点下如何保持搜索栏宽度与行为一致
Bootstrap 的栅格类（如 col-md-6）可控制宽度，但搜索建议下拉列表常因父容器 overflow: hidden 或 position: relative 被截断。尤其在 sm 和 xs 断点，导航栏折叠后搜索框进入 navbar-toggler 内部，此时需额外处理。
实操建议：对 navbar 内搜索栏，用 position: static 临时解除 navbar 的 overflow: hidden 限制；下拉容器加 data-bs-toggle="dropdown" 并配合 dropdown-menu 类，让 Bootstrap 的 dropdown JS 自动处理定位和隐藏逻辑，比手写更可靠。
- 不要给搜索框父容器设
overflow: hidden，否则下拉列表会被砍掉 - 在
@media (max-width: 768px)下，建议把搜索框提至 navbar 顶层，而非塞进折叠菜单里 —— 否则用户得先点三次（展开 → 找搜索 → 输入） -
dropdown-menu默认有min-width: 10rem，若建议项文字短，可用style="min-width: auto"避免撑宽
键盘操作支持：Tab/↑↓/Enter 怎么和建议列表联动
纯鼠标操作不够友好，尤其对辅助技术用户。必须手动实现键盘导航，Bootstrap 的 dropdown JS 不接管 input 内的上下键行为，得自己监听 keydown。
核心逻辑：维护一个 activeIndex 状态，按 ↑ ↓ 更新高亮项；Enter 或 Tab 插入选中值并关闭下拉；Escape 清空高亮并 blur 输入框。注意：不能直接用 focus() 操作 li 元素（非 tabable），应加 tabindex="-1" 并调用 .focus()。
- 每次更新
activeIndex前，先用querySelectorAll(".suggestion-item")获取当前可见项，避免索引越界 - Enter 后要调用
event.preventDefault()，否则会触发表单提交 - 若建议项含 HTML（如高亮关键词），用
textContent取值，避免 XSS 风险
为什么用 input-group 而不是 form-floating
form-floating 在搜索场景下容易出问题：label 浮动后与建议下拉重叠，且其 height 计算依赖固定行高，一旦下拉出现，整体布局易错位；而 input-group 提供清晰的左右结构（如左侧图标、右侧按钮），更适合组合搜索按钮或清空按钮。
实操上，把 input-group 包裹 form-control，再把下拉容器作为兄弟节点放在同一 input-group 外部（同级），通过 JS 动态显示/隐藏。这样既保响应式弹性，又避免浮动 label 的重绘干扰。
- 清空按钮建议用
button type="button"+data-bs-toggle="tooltip"，避免误提交 - 搜索图标用
input-group-text，别用绝对定位 —— 否则在sm断点图标会偏移 - 如果用了
form-floating，务必加z-index: 1000到下拉容器，否则被浮动 label 盖住
getBoundingClientRect() 返回值不稳定，建议用 offsetTop + offsetLeft 做 fallback 定位计算。
