bootstrap：创建可搜索的多选下拉菜单，如语义UI

Question

我还没有找到以下情况的解决方案：

我已经在Bootstrap上建立了我的网站。现在该框架非常有用，只有我缺少带有多选选项的简洁搜索栏。

上图显示了我现在拥有的那张。这是一个带有附加按钮的输入组。我发现语义UI具有不错的多选下拉列表组件。

您可以在“多重搜索选择”下看到示例：https://semantic-ui.com/modules/dropdown.html

直接将其添加到我的代码中很容易，但是（至少对我来说）不像上面的图片那样创建一个搜索栏。

带有附加按钮的输入（一个用于其他选项和一个搜索按钮）。

[我想实现的是搜索我的数据库（使用Ajax，目前可以正常使用），并在我的输入/选择字段中显示多选。

然后应该像上面这样。现在语义UI（https://semantic-ui.com/elements/input.html）中有一个输入组版本，但这不是像我顶部的搜索栏那样的多重选择。

[如何在不将整个网站切换到语义ui的情况下创建引导搜索栏的多选语义UI版本？它的行为应类似于语义ui中的multiselect下拉菜单（例如在下拉菜单中显示格式化的HTML结果，我可以从中选择），并通过AJAX发布唯一的网址（带有“搜索”按钮旁边的“ globe”菜单选项）。

我将不胜感激。谢谢

Answer 1

如果您不依赖特定的插件，则可以使用select2：

https://select2.org/selections->搜索多值或多个https://select2.org/data-sources/ajax->当您必须使用ajax时

已编辑：您可以使用select2-bootstrap-themehttps://select2.github.io/select2-bootstrap-theme/4.0.3.html