javascript - 添加 Bootstrap 5 搜索栏下拉菜单

Question

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

我知道我可以使用 javascript 手动添加搜索栏的代码，并尝试将其与 bootstrap 下拉列表链接，但我对 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 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.

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

Tom Select was forked from selectize.js with four main objectives: modernizing the code base, decoupling from jQuery, expanding functionality, and addressing issue backlogs.

这是主要示例:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b140b16" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7e656727796f666f697e4a38243a243a277869243e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74001b195907111811170034465a445a445906175a40" rel="noreferrer noopener nofollow">[email protected]</a>/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如果你需要的话。