Bootstrap怎么实现带搜索功能的下拉框-Bootstrap教程-PHP中文网

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>

给加上 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" 冲突。

常见翻车点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

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() 拦截