bootstrap 5 原生 select 不支持搜索，需用 choices.js 替代；关键配置包括 searchenabled: true、searchchoices: false、shouldsort: false、position: 'auto'，动态加载后须调用 setchoices 或 addchoice 刷新，移动端需设 searchfloor: 1 并确保 input type="text"。
Bootstrap 5 的 select 原生不支持搜索，得换组件
Bootstrap 官方的 form-select 就是原生 <select></select> 加了个 class，浏览器原生下拉框压根没有输入过滤能力。想加搜索，必须引入第三方增强组件，最常用、兼容性最好、和 Bootstrap 5 样式融合最自然的是 choices.js。
别试 select2（默认样式冲突大、需额外 CSS 调整）或自己写 JS 监听 input（容易漏掉键盘导航、移动端兼容差、无法复用筛选逻辑）。
实操建议：
- 用 npm 安装：
npm install choices.js，或通过 CDN 引入choices.min.js和choices.min.css - 确保目标
<select></select>元素有class="form-select"（保持 Bootstrap 5 外观），且没设multiple属性（除非你要多选搜索） - 初始化时显式关闭排序（
shouldSort: false），否则 Choices 会按文本重排选项，打乱你 HTML 里写的顺序
choices.js 初始化关键参数怎么配才不翻车
很多同学加了 choices.js 却搜不到、点不动、样式错位，八成是参数没对齐 Bootstrap 5 的交互预期。重点盯这几个：
-
searchEnabled: true—— 必开，否则没搜索框 -
searchChoices: false—— 关闭“搜索已选项”，只搜未选的（避免重复结果干扰） -
position: 'auto'—— 让下拉菜单自动判断上下展开方向（Bootstrap 5 的dropdown-menu默认行为） -
noResultsText: '未找到匹配项'—— 中文项目必须设，否则显示英文No results found -
itemSelectText: ''—— 清空默认的 “Press to select” 提示，避免和 Bootstrap 的form-label冲突
示例初始化代码：
const select = document.querySelector('.form-select');
if (select) {
new Choices(select, {
searchEnabled: true,
searchChoices: false,
shouldSort: false,
position: 'auto',
noResultsText: '未找到匹配项',
itemSelectText: ''
});
}
动态加载选项后搜索失效？得手动调用 refresh
如果下拉数据是 AJAX 加载的（比如地区三级联动），直接操作 select.innerHTML 或用 appendChild 插入选项后，choices.js 不会自动感知——它只在初始化时读取一次 DOM。
这时候必须手动触发刷新：
- 新增选项后，调用
instance.destroy()再重新new Choices(...)（简单但性能差，尤其频繁更新时） - 推荐做法：用
instance.setChoices()传入新数组，格式为[{value: '1', label: '北京'}, ...]，它会重建内部索引并保留当前搜索状态 - 如果只是追加几个选项（非全量替换），可用
instance.addChoice({value: 'sh', label: '上海'})，比setChoices更轻量
注意：setChoices 会清空当前选中值，如需保留，得先缓存 instance.getValue()，再在设置后手动 setValue()。
移动端点开慢、键盘弹出异常？关掉 searchFloor 和检查 input 类型
在 iOS Safari 或部分安卓 WebView 中，choices.js 的搜索输入框可能响应迟钝、软键盘不弹出，常见原因是：
-
searchFloor默认是3（至少输 3 个字才开始搜索），导致刚点开就卡住——设成1更符合直觉 - 某些框架（如 Vue）动态渲染后，
input元素可能被加上type="search"，而 iOS 对这个 type 的软键盘适配不稳定；强制设为type="text"更稳妥 - 如果页面用了
transform: scale()或zoom缩放，会导致 Choices 的下拉定位偏移，务必检查父容器是否有这类样式
真正麻烦的不是加功能，而是不同设备上“搜得到、点得准、关得掉”这三件事同时成立——建议在真机上测完 iOS + 华为 + 小米各一遍，别只信 Chrome DevTools 的模拟器。
