Bootstrap 5原生不支持可搜索下拉框，需借助Choices.js等第三方插件；其轻量无jQuery依赖、兼容Bootstrap表单结构，通过CDN引入并初始化即可实现搜索、多选、无障碍等功能。
Bootstrap 5 里没有原生的 searchable select
bootstrap 官方组件库（包括 form-select 和 dropdown）都不支持搜索过滤选项。你看到的“带搜索的下拉框”，基本都是靠第三方插件或手写逻辑补足的。别在 bootstrap.bundle.min.js 里找 searchabledropdown —— 它根本不存在。
用 Choices.js 是最省心的方案
它轻量（~20KB）、无 jQuery 依赖、样式可定制，和 Bootstrap 5 的表单类（如 form-control）能自然共存。关键是它不破坏 Bootstrap 的 DOM 结构，不会让 form-check 或 invalid-feedback 失效。
实操步骤：
- 通过 CDN 引入：
<link href="https://cdn.jsdelivr.net/npm/choices.js@10.7.2/public/assets/styles/choices.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/choices.js@10.7.2/public/assets/scripts/choices.min.js"></script>
- 给
<select></select>加上data-trigger或 class 标识，避免和普通下拉混淆：<select class="form-select js-searchable" multiple> <option value="1">React</option> <option value="2">Vue</option> <option value="3">Svelte</option> </select>
- 初始化时禁用默认搜索框的 placeholder（否则和 Bootstrap 的
form-select占位符冲突）：new Choices('.js-searchable', { searchEnabled: true, searchPlaceholderValue: '输入关键字…', shouldSort: false, // 避免重排打乱你写的 HTML 顺序 position: 'auto' // 自动判断向上/向下展开，兼容 Bootstrap 的 popper 定位逻辑 });
用 Bootstrap Dropdown + 手写搜索会踩哪些坑
如果你坚持不用第三方库，想基于 dropdown-menu + input-group 拼一个，得自己处理焦点、键盘导航、防抖、空结果提示——而且很容易和 Bootstrap 的 data-bs-toggle="dropdown" 冲突。
常见翻车点：
-
input在dropdown-menu里无法获得焦点：因为 Bootstrap 默认在菜单隐藏时把tabindex="-1"设在了菜单容器上，要手动移除或改用focus()触发 - 按
Enter选中后菜单不关闭：得监听keydown并调用bootstrap.Dropdown.getInstance(el).hide() - 搜索匹配高亮难做：CSS 里不能用
:has()选中父级，得靠 JS 给匹配项加临时 class，比如is-match，再配.dropdown-item.is-match { background: #e9ecef; } - 移动端点击穿透：iOS 上
input聚焦可能触发两次show.bs.dropdown，需要加event.stopPropagation()拦截
别忽略表单验证和无障碍支持
Choices.js 默认生成的结构是 <div class="choices">…</div>，原始 <select></select> 会被设为 hidden。这意味着：
-
required属性依然生效（它检查的是原始select），但错误提示得靠 JS 把is-invalid类同步过去 - 屏幕阅读器默认读不到搜索框，得手动加
aria-label="请选择技术栈，支持搜索"到生成的input元素上 - 如果用了
multiple，清空按钮的aria-label必须明确写成“清除全部已选项”，不能只写“清除”
这些细节在快速原型阶段常被跳过，但一进正式表单校验流程就会暴露出来——尤其是当后端返回 422 Unprocessable Entity 且前端没同步显示错误状态时。
