如何在Bootstrap 5中实现带搜索框的下拉选择菜单

Bootstrap 5 可搜索下拉菜单实现方案 #

Bootstrap 5 原生暂未内置带搜索功能的下拉选择器，以下提供两种可行实现方案，均不需要依赖jQuery，也不会出现布局错乱问题：

方案一：使用Tom Select（推荐，和你之前用的Select2体验一致） #

Tom Select是Select2的无jQuery衍生版本，默认适配Bootstrap 5样式体系，自带搜索、排序、多选等常用功能，无需手动编写搜索逻辑，用法和你之前的Select2几乎一致。

完整示例代码

<!-- 引入Bootstrap 5基础依赖 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入Tom Select适配依赖 -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <form class="col-md-4">
      <label class="form-label">选择食品</label>
      <select class="form-control" id="food-select" placeholder="搜索或选择食品">
        <option value="">请选择</option>
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
        <option value="strawberry">草莓</option>
        <option value="watermelon">西瓜</option>
        <option value="grape">葡萄</option>
        <option value="peach">桃子</option>
      </select>
    </form>
  </div>
</div>

初始化代码（仅需1行核心逻辑）

new TomSelect('#food-select', {
  sortField: {
    field: 'text',
    direction: 'asc'
  }
});

可选样式适配（和Bootstrap原生输入框完全对齐）

.ts-wrapper.form-control {
  padding: 0 !important;
  border-radius: 0.375rem !important;
}
.ts-control {
  border: none !important;
  box-shadow: none !important;
}

方案二：原生Bootstrap 5实现（无第三方依赖） #

如果你不想引入额外组件库，可以用原生Dropdown组件结合少量JS实现，所有逻辑透明可控：

<div class="container mt-5">
  <div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle w-25" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="foodDropdownBtn">
      请选择食品
    </button>
    <ul class="dropdown-menu w-25 p-2">
      <li class="mb-2">
        <input type="text" class="form-control form-control-sm" id="foodSearchInput" placeholder="搜索食品">
      </li>
      <li><hr class="dropdown-divider"></li>
      <li><button class="dropdown-item food-option" type="button">苹果</button></li>
      <li><button class="dropdown-item food-option" type="button">香蕉</button></li>
      <li><button class="dropdown-item food-option" type="button">橙子</button></li>
      <li><button class="dropdown-item food-option" type="button">草莓</button></li>
      <li><button class="dropdown-item food-option" type="button">西瓜</button></li>
      <li><button class="dropdown-item food-option" type="button">葡萄</button></li>
      <li><button class="dropdown-item food-option" type="button">桃子</button></li>
    </ul>
  </div>
</div>

配套JS逻辑

const searchInput = document.getElementById('foodSearchInput');
const options = document.querySelectorAll('.food-option');
const dropdownBtn = document.getElementById('foodDropdownBtn');

// 搜索过滤
searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.toLowerCase();
  options.forEach(opt => {
    opt.style.display = opt.textContent.toLowerCase().includes(keyword) ? 'block' : 'none';
  });
});

// 选项选中赋值
options.forEach(opt => {
  opt.addEventListener('click', () => {
    dropdownBtn.textContent = opt.textContent;
  });
});

内容的提问来源于stack exchange，提问作者Tester321