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

Display separate search box in select2 multiselect

本文关键字：单独 搜索 显示 select2      更新时间：2023-09-26

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

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

只需要2个调整，使其工作。我使用当前版本Select2 4.0.6-rc.1。我编辑了这些行:

:4768删除条件，并使用SearchableDropdown来选择单个和多个选项

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

~:4832注释此块，以避免在select input

中添加搜索功能
  // if (options.multiple) {
  //   options.selectionAdapter = Utils.Decorate(
  //     options.selectionAdapter,
  //     SelectionSearch
  //   );
  // }

就是这样

相关文章：