添加 bootstrap 5 搜索栏下拉菜单

Question

我在这里有点新，但我想知道在添加带有搜索栏的下拉菜单时是否有人可以提供帮助。例如，我希望用户能够从某些食物列表中选择某些项目或搜索它们，但我无法在 bootstrap 5 中找到执行此操作的教程。我阅读了文档，但它没有给我任何使用下拉列表实现搜索栏的具体方法。

我知道我可以使用 javascript 手动添加搜索栏的代码并尝试将其与引导下拉菜单链接，但我对 JavaScript 不是很熟悉，想知道 boostrap 是否有办法做到这一点布局不乱就枯萎。

我遵循了 bootstrap 4 中的教程，但它基本上有我想要的想法，但是由于 jQuery 从 bootstrap 5 中删除，它在我当前的网站中不起作用。这是代码： https://codeshare.io/0gQRwQ

$('.select2').select2();

.select2-container .select2-selection--single {
  height: 34px !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #ccc !important;
  border-radius: 0px !important;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div class="container">
  <div class="row">
    <form class="col-md-4">
      <label>Select</label>
      <select class="form-control select2">
        <option>Select</option>
        <option>Car</option>
        <option>Bike</option>
        <option>Scooter</option>
        <option>Cycle</option>
        <option>Horse</option>
      </select>
    </form>
  </div>
</div>

任何建议将不胜感激。谢谢

Answer 1

正如@Alimo 所说，您的示例基于Select2 库，并且严重依赖于jQuery，据我所知，没有计划删除它。

Select2 是基于 jQuery 的选择框替代品。它支持搜索、远程​​数据集和结果分页。

作为替代方法，您可以使用tom-select.js

Tom Select 是从 selectize.js 中衍生出来的，主要目标有四个：现代化代码库、与 jQuery 分离、扩展功能和解决问题积压。

这是主要的示例：

new TomSelect("#select-tags", {
  plugins: ['remove_button'],
  create: true,
  onItemAdd: function() {
    this.setTextboxValue('');
    this.refreshOptions();
  },
  render: {
    option: function(data, escape) {
      return '<div class="d-flex"><span>' + escape(data.value) + '</span><span class="ms-auto text-muted">' + escape(data.date) + '</span></div>';
    },
    item: function(data, escape) {
      return '<div>' + escape(data.value) + '</div>';
    }
  }
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>

<div class="container">
  <div class="row">
    <div class="p-4">
      <select id="select-tags" multiple placeholder="Best movies and TV shows">
        <optgroup label="TV Shows">
          <option value="Blue Bloods" data-date="2010-2021">Blue Bloods (2010-2021)</option>
          <option value="Magnum P.I." data-date="1980-1988" selected>Magnum P.I. (1980-1988)</option>
        </optgroup>
        <optgroup label="Movies">
          <option value="An Innocent Man" data-date="1989">An Innocent Man (1989)</option>
          <option value="In & Out" data-date="1997">In & Out (1997)</option>
          <option value="Lassiter" data-date="1984">Lassiter (1984)</option>
          <option value="Mr. Baseball" data-date="1992">Mr. Baseball (1992)</option>
          <option value="Quigley Down Under" data-date="1990">Quigley Down Under (1990)</option>
          <option value="Three Men and a Baby" data-date="1987">Three Men and a Baby (1987)</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

如果您需要，这里是更多 examples。

Answer 2

选择字段中的搜索栏不是引导程序的一部分。它由您包含的 select2 包提供。不幸的是select2需要jQuery来操作。

如果你想使用 bootstrap 5 并完全移除 jQuery，你可以使用datalists 来实现类似的功能。