最快方案是用 bootstrap-select 替代原生 select；它封装了搜索框、筛选逻辑和 A11Y 支持，需引入对应 CSS/JS、设 data-live-search="true"，并注意初始化时机与动态刷新。
用 bootstrap-select 替代原生 select 是最快方案
bootstrap 官方下拉（dropdown）组件本身不支持搜索过滤，硬改 dom 或监听输入事件容易破坏事件流和键盘导航。直接换用社区维护成熟、兼容 bootstrap 5 的 bootstrap-select，它把搜索框、筛选逻辑、a11y 支持都封装好了。
常见错误现象：dropdown 里手动加 <input> 后，点击选项不关闭菜单、按回车没反应、移动端点不到搜索框、屏幕阅读器报错。
- 必须引入
bootstrap-selectCSS 和 JS（注意版本对齐 Bootstrap 5） - 原
<select>标签加上data-live-search="true" - 不要给
select外层再套dropdown—— 它会自己渲染完整下拉结构 - 如果用了
multiple，记得加data-live-search-placeholder="搜索..."提升体验
bootstrap-select 搜索不触发？检查这几个参数
搜索框显示但输不进字、输完没反应，大概率是初始化或属性配置漏了。
-
data-live-search="true"必须写在<select>标签上，不是父容器 - 确保 JS 初始化执行在 DOM 加载后，比如放在
</body>前或用$(document).ready() - 如果动态加载选项，得手动调用
$('select').selectpicker('refresh')，否则新option不进搜索索引 - 默认只匹配
text（即<option>文本</option>），不搜data-subtext或title，要搜得加data-live-search-style="contains"
不想引入第三方？用 bootstrap 5.3+ + typeahead.js 手搓轻量方案
适合已有项目不愿加新依赖、且下拉数据量不大（select，用 dropdown + input + ul 列表模拟，靠 typeahead.js 做过滤。
性能影响：每次输入都遍历 li 做 textContent 匹配，数据超千条会卡顿；兼容性上，typeahead.js 对 Bootstrap 5 的 dropdown 菜单定位有小 bug，得手动加 data-bs-popper="none" 关闭 Popper 干预。
- HTML 结构里，
<input>放在dropdown-menu顶部，role="combobox"不能少 - 绑定
typeahead时，source必须是数组，不能直接传querySelectorAll('option') - 选中后要手动更新隐藏的
<input type="hidden">值，否则表单提交拿不到
移动端触摸不准、键盘操作失效？这是 A11Y 漏洞点
很多“能用”的搜索下拉在 iPad 或 Windows 高对比度模式下直接失灵——因为没处理 keydown 中的 ArrowDown/Enter，也没给搜索框加 aria-controls 关联列表。
-
bootstrap-select默认支持↑↓切换高亮项、Enter确认，但得确保没被其他 JSpreventDefault() - 手写方案里，搜索框必须设
aria-autocomplete="list"，列表ul得有id并被aria-owns引用 - iOS Safari 对
input在dropdown-menu内聚焦有延迟，加touch-action: manipulation能缓解
最常被忽略的是：搜索过滤后，没重置焦点顺序。用户按 Tab 仍会跳到原始未过滤的第 1 个 li，而不是当前可见的第一个结果。
