javascript - 在 select2 多选中显示单独的搜索框

Question

当您使用 select2(下拉 jquery 框架)时，您可以使用 jquery 制作精美的下拉菜单。

如您所见，单选框有一个单独的搜索框，但多选框有内联的搜索框。

是否可以为多选添加一个单独的搜索框？

$(".my-dropdown").select2();

.my-dropdown{
  width: 50%;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select class="my-dropdown" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

<br /><br /><br />

<select class="my-dropdown">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

Answer 1

我今天遇到了类似的问题，试图找到一些配置属性，这对我来说很容易解决，但显然仍然没有可用的。所以我查看了源代码并...

只需进行 2 次调整即可使其正常工作。我使用当前版本 Select2 4.0.6-rc.1。我编辑了这些行:

:4768 摆脱条件并使用 SearchableDropdown 进行单个和多个选项的选择

var SearchableDropdown = Utils.Decorate(Dropdown, DropdownSearch);
options.dropdownAdapter = SearchableDropdown;

~:4832 注释此 block ，以避免在选择输入中添加搜索功能

  // if (options.multiple) {
  //   options.selectionAdapter = Utils.Decorate(
  //     options.selectionAdapter,
  //     SelectionSearch
  //   );
  // }

就是这样:)