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

Posted 2023-05-07

【中文标题】在 select2 多选中显示单独的搜索框

【英文标题】：Display separate search box in select2 multiselect

【发布时间】：2017-01-24 09:23:48

【问题描述】：

当您使用 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>

【问题讨论】：

你有没有想过这个问题？

【参考方案1】：

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

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

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

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

~:4832 评论此块，以避免在选择输入中添加搜索功能

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

就是这样:)