bootstrap-select是目前兼容Bootstrap 5且支持搜索的最稳方案，需按序加载jQuery、Bootstrap、bootstrap-select，添加data-live-search="true"即可启用搜索，动态更新后须调用refresh方法。
bootstrap-select 是最省事的选择
原生 Bootstrap 5 的 dropdown 组件不支持搜索，硬塞 <input> 进去会触发菜单闪退、键盘导航失效、移动端点不中等一堆问题。直接用 bootstrap-select 是目前最稳的方案——它不是“加个 class 就好”，而是完整封装了过滤逻辑、焦点管理、A11Y 属性和响应式行为。
关键点：
- 必须按顺序加载：先
jQuery，再bootstrap.min.js，最后bootstrap-select.min.js（v1.13.9+ 兼容 Bootstrap 5） -
<select class="selectpicker">是唯一必需的标记，不用改 DOM 结构 - 启用搜索只需加
data-live-search="true"，不用写 JS - 中文提示要额外引入
defaults-zh_CN.min.js，否则 placeholder 显示英文 - 动态更新选项后，必须调用
$('select').selectpicker('refresh')，否则搜索失效
手动实现 dropdown + 搜索框要防三个坑
如果不想引入第三方库，得用原生 dropdown 组合 <input> 和 <ul>。但以下三点不处理，功能就不可用：
-
input的click和focus事件必须调用event.stopPropagation()，否则点击即收起菜单 - 过滤不能只靠
input事件，还得监听keydown处理ArrowUp/ArrowDown键聚焦列表项 - 每次展开菜单时，得在
show.bs.dropdown钩子里清空搜索框并重置所有li的display状态，否则上次搜索结果残留 - 过滤时只比对
li.textContent，别用innerHTML，否则带图标的选项会误匹配 HTML 标签 - 选项超过 200 条时，用
style.display = "none"切换显隐，别删 DOM 节点——性能差一个数量级
Search mode 参数影响实际体验
bootstrap-select 的 liveSearchStyle 有两个常用值，选错会导致用户搜不到内容：
-
"contains"：子串匹配（如搜 “an” 匹配 “Shanghai”、“Hangzhou”），适合模糊查找 -
"startsWith"：前缀匹配（如搜 “be” 只匹配 “Beijing”），适合首字母定位，响应更快 - 开启
liveSearchNormalize: true后，输入 “cafe” 也能匹配 “café”，但会略微增加 CPU 开销 - 搜索框 placeholder 文字由
liveSearchPlaceholder控制，不设的话默认是 “Search…”
移动端和无障碍容易被忽略的细节
很多团队做完 PC 端就上线，结果发现 iOS 上点不了搜索框、屏幕阅读器读不出“可搜索下拉”，问题出在这几处：
- 搜索框必须设
type="search"，否则 iOS 键盘不显示搜索按钮，Android 也不触发软键盘搜索动作 -
<select>必须有aria-label或包裹<label>，否则 VoiceOver 不知道这是什么控件 - 移动端小屏下，搜索框宽度要用
col-auto或w-100控制，不能依赖默认 100% 宽度——否则按钮被挤出视口 - 禁用状态（
disabled）时，整个.selectpicker要同步灰掉，否则视觉与功能不一致 - 搜索结果为空时，应显示
<li class="no-results">未找到匹配项</li>，而不是留白
