bootstrap本身不提供autocomplete功能，所有建议逻辑必须由js实现；推荐手写或使用awesomplete等微库，下拉列表需脱离dom流定位、控制建议≤50条、移动端用mousedown替代click、键盘导航需手动维护activeindex并设tabindex="-1"。
Bootstrap 本身不提供自动完成（autocomplete）功能，form-control 只负责样式，所有建议逻辑必须由 JS 实现。直接套用 data-bs-toggle 或依赖 Bootstrap 的 dropdown JS 不会触发搜索建议 —— 它只管菜单显隐，不管输入匹配。
如何用 JS 实现轻量级 autocomplete 而不引入 jQuery
别用 jquery-ui.autocomplete 这类重型库，体积大、与 Bootstrap 5+ 冲突多。推荐手写或用 awesomplete（仅 4KB）、simple-autocomplete（无依赖）这类微库。
-
awesomplete初始化只需两行：new Awesomplete(document.querySelector("input[type=search]"), { list: ["apple", "banana"] }); - 本地数组建议控制在 ≤50 条，否则
filter()拖慢 typing 响应 - 若用
fetch请求后端，必须加 loading 状态遮罩，且清空旧建议再渲染新结果，避免残留 - 移动端慎用
click绑定建议项：iOS Safari 中blur常先于click触发，导致选中丢失；改用mousedown
下拉列表为什么被截断？定位和容器是关键
常见现象：小屏下建议列表只显示半截，或完全消失。根本原因不是 CSS 写错，而是父容器的 overflow: hidden 或 position: relative 把绝对定位的下拉框裁掉了。
- 下拉容器必须脱离输入框 DOM 流，不能塞在
input-group内部 - 推荐用
position: absolute; top: 100%; left: 0; width: 100%;定位，且父级不能有overflow: hidden - 在 navbar-collapse 或 offcanvas 中，要临时解除其
overflow: hidden，或把下拉容器挂到body下（用appendChild动态挂载） - 别给下拉容器设固定
min-width，dropdown-menu 默认min-width: 10rem会撑宽短文本项，加style="min-width: auto"更安全
键盘导航怎么手动实现才可靠
Bootstrap 的 dropdown JS 不接管 input 内的 ↑↓/Enter 键，必须自己监听 keydown 并维护 activeIndex 状态。
- 每次按 ↑↓ 时，先用
querySelectorAll(".suggestion-item")获取当前可见项，再更新高亮 - 高亮项需加
tabindex="-1"，否则.focus()失效（非 tabable 元素无法聚焦） - Enter 或 Tab 插入选中值后，要调用
input.blur()+ 手动隐藏下拉容器，不能只靠 CSSdisplay: none - Escape 应清空
activeIndex并触发input.blur()，避免焦点卡在隐藏元素上
最易被忽略的点是：移动端软键盘弹出时，页面视口可能被 Safari 的 overflow 保护机制强制重排，导致下拉列表错位或消失 —— 此时仅靠 JS 定位不够，必须配合 me-2 提供右侧缓冲，并在 focusin 时主动收起 navbar-collapse 或 offcanvas。
