必须为input添加autocomplete="off"以禁用浏览器原生下拉，再用bootstrap dropdown复用下拉菜单实现搜索联想，配合防抖请求、点击填值和自动收起。
用 autocomplete="off" 阻止浏览器原生下拉干扰
Bootstrap 表单本身不提供搜索联想（autocomplete）功能，但浏览器会基于历史输入自动触发原生下拉建议，这和你手动实现的联想列表视觉冲突、交互打架。必须显式关闭它，否则你的 input 一聚焦，浏览器就弹出无关记录。
正确写法是给表单控件加上：autocomplete="off"。注意不是 autocomplete="false"——后者在多数浏览器中无效；也不是只加在 form 标签上（作用范围不够），必须加在具体 input 元素上：
<input type="text" class="form-control" name="keyword" autocomplete="off">
如果用了 Bootstrap 5 的 form-control 或 Vue/React 封装组件，也要确保最终渲染出的 input 标签包含该属性。
用 data-bs-toggle="dropdown" + dropdown-menu 快速挂载联想列表
不需要重写整个下拉逻辑，Bootstrap 自带的下拉菜单（Dropdown）就能复用：它支持动态内容、键盘导航、点击收起，且样式与表单一致。关键是把 dropdown-menu 定位到输入框下方，并用 data-bs-toggle="dropdown" 关联触发。
结构要点：
- 外层用
div class="dropdown"包裹整个搜索区域 -
input放在dropdown-toggle位置（但不加data-bs-toggle，避免点击时收起） - 另起一个
ul class="dropdown-menu"，放在input后面，初始隐藏（style="display:none"） - 通过 JS 监听
input的input事件，根据值异步获取联想词，填充ul并show()
示例片段（不依赖 jQuery）：
<div class="dropdown"> <input type="text" class="form-control" autocomplete="off"><ul class="dropdown-menu"></ul> </div>
监听 input 事件时必须加防抖，否则请求爆炸
用户每敲一个键都发请求，不仅服务器压力大，UI 还会频繁闪动、卡顿。必须加毫秒级防抖（debounce），等用户停顿后再查。
简单防抖实现（不用额外库）：
let timer = null;
input.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => {
const q = input.value.trim();
if (q.length > 1) fetchSuggestions(q); // 调用你的 API
}, 300); // 停顿 300ms 后执行
});
注意点：
- 不要用
keyup或change：前者响应太急，后者无法捕获粘贴；input事件最准 - 长度判断至少为 2，避免无意义请求（如搜 “a”）
- 每次新请求前清掉旧
timer，否则旧结果可能覆盖新结果
联想项点击后要同步更新 input 值并收起菜单
用户点中某条联想词，不能只做跳转或提交，得把词填进输入框、光标移到末尾、然后关闭下拉菜单——这是基本体验。
关键操作链：
- 给每个
li绑定click事件 - 取
li.textContent（或自定义data-value）赋给input.value - 调用
input.focus()确保焦点还在输入框 - 手动触发 Bootstrap 的隐藏方法：
bootstrap.Dropdown.getInstance(menu).hide()（Bootstrap 5）
别漏掉光标定位，否则用户想继续编辑时得手动点一下；也别忘了清除防抖计时器，避免后续输入被误拦截。
联想词列表的 DOM 更新、键盘方向键支持、空结果提示这些属于进阶需求，先确保点击填值+收起这两步稳了，再考虑扩展。
