Bootstrap本身不提供自动完成能力，需JS控制+合理DOM结构+避开overflow和定位陷阱；常见下拉被截断或消失，主因是父容器如.navbar的overflow:hidden、z-index过低或建议列表嵌套在flex布局中，应将其设为position-absolute并脱离navbar流，用form作为relative锚点，设z-index:1050、top-100、w-100，并注意移动端mousedown绑定与防抖处理。
Bootstrap 本身不提供自动完成（autocomplete）能力，form-control 只管样式，input[type="search"] 也不自带建议逻辑。真要实现带搜索建议的响应式搜索框，得靠 JS 控制 + 合理 DOM 结构 + 避开 Bootstrap 的 overflow 和定位陷阱。
为什么 autocomplete 下拉列表总被截断或消失
常见现象是：输入文字后建议框闪一下就没了，或者只显示半行。根本原因不是 JS 写错了，而是父容器限制了渲染空间。
-
.navbar默认有overflow: hidden，任何position: absolute的下拉列表都会被砍掉 -
.navbar-collapse是 flex 容器，内部强行塞<ul class="list-group">会被挤压变形、高度塌陷 - 建议容器没设
z-index，默认低于.navbar（z-index: 1000），直接被盖住 - 别把建议列表塞进
<li>或<nav-item>里——它不是导航项，不该参与 flex 布局
怎么让建议列表正确悬浮在输入框下方
关键不是“加 dropdown 类”，而是脱离 navbar 流、精准定位、宽度对齐。
- 给
<form>加position-relative，作为定位锚点 - 建议容器（如
<ul id="searchSuggestions">）用position-absolute top-100 start-0 w-100，并设z-index: 1050 - 加
mt-1微调间距，避免紧贴输入框边框；加border rounded shadow-sm bg-white视觉补全 - 不要用
dropdown-menu包裹建议项——它依赖点击触发，不适合 input 实时事件 - 移动端需额外加
max-height: 200px; overflow-y-auto，防列表过长撑出视口
input 事件怎么防抖 + 安全更新建议项
用户狂敲键盘时，不能每按一次都 filter() 或发请求，否则卡顿、请求爆炸、旧结果残留。
- 用
setTimeout+clearTimeout实现 300ms 防抖，变量存let debounceTimer - 本地数组建议控制在 50 条以内，
items.filter(i => i.toLowerCase().includes(val))才够快 - 若走 fetch，每次请求前先清空旧列表、设 loading 状态（比如加
disabled或 loading 文字），避免用户看到上一轮结果 - 更新 DOM 时用
suggestions.innerHTML = ...，别用append()—— 多次 append 会打断焦点和键盘导航 - 空搜索词时，
suggestions.style.display = "none"；有结果才display = "block"
移动端点击建议项为啥经常失效
iOS Safari 下，点建议项常触发 blur 先于 click，导致选项没选中、输入框已失焦、键盘收起。
- 绑定事件必须用
mousedown，不是click—— 它在 blur 前触发 - 选中后手动触发
input.dispatchEvent(new Event('input'))，确保 Vue/React 等框架能捕获值变更 - 填充完值立刻调
input.focus()，保持光标在末尾，方便继续编辑 - 键盘弹出后，别依赖 resize 或 scroll 事件自动调整位置——Safari 的 viewport overflow 机制会让定位失效，建议固定用
top: 100%而非bottom: 0
最易被忽略的是：建议列表的 DOM 必须和 <form> 平级，不能嵌套；防抖必须清上一个 timer；移动端 mousedown 绑定不是可选项——这是 iOS 真实行为，不是模拟问题。
