启用 select2 多选搜索框

Posted 2023-05-07

【中文标题】启用 select2 多选搜索框

【英文标题】：Enable select2 multi-select search box

【发布时间】：2016-07-11 08:17:03

【问题描述】：

我需要能够使用 select2 将搜索框添加到我的多选字段中。

无论出于何种原因，虽然搜索框在单选字段中按预期显示，但对多选字段的相同 select2() 调用不会添加搜索框。

var data = []; // Programatically-generated options array with > 5 options
var placeholder = "select";
$(".mySelect").select2(
    data: data,
    placeholder: placeholder,
    allowClear: false,
    minimumResultsForSearch: 5);

select2 不支持多选搜索框吗？有没有人有一个很好的类似功能的替代品？

【参考方案1】：

答案是select2输入元素变成了没有后端数据的多选搜索框

如果您开始输入，您的结果将开始过滤选项

如果你设置为加载远程ajax数据，它实际上确实保留了一个搜索框，但是对于没有数据源的多选，输入是搜索栏，这很直观

https://select2.github.io/examples.html

【讨论】：

原来我们的 CSS 隐藏了多选框中的搜索字段。对我来说，为单选设置单独的搜索栏和为多选设置组合的选择/搜索栏并不是最直观的，但至少它有效。

据我所知，版本 4 带有远程 ajax 数据，并且多个不显示搜索框。所以答案是……没有？

此选项在传递数据选项时不会保留搜索框，而是将数据作为对象数组。

【参考方案2】：

select2 v4.0.3

<select class="smartsearch_keyword" name="keyword[]" id="keyword" style="width:100%;"></select>

$(".smartsearch_keyword").select2(
    multiple: true,
    ...
);

另外：给set multiple default selections

【参考方案3】：

您可以使用 dropdownAdapter 选项设置原始 带有 SearchBox 的下拉菜单。 这段代码对我有用（select2 v. 4.0.13）：

//Set Dropdown with SearchBox via dropdownAdapter option (https://***.com/questions/35799854/how-to-add-selectall-using-dropdownadapter-on-select2-v4)
var Utils = $.fn.select2.amd.require('select2/utils');
var Dropdown = $.fn.select2.amd.require('select2/dropdown');
var DropdownSearch = $.fn.select2.amd.require('select2/dropdown/search');
var CloseOnSelect = $.fn.select2.amd.require('select2/dropdown/closeOnSelect');
var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody');

var dropdownAdapter = Utils.Decorate(Utils.Decorate(Utils.Decorate(Dropdown, DropdownSearch), CloseOnSelect), AttachBody);

$('#select2').select2(
    ...
    dropdownAdapter: dropdownAdapter,
    minimumResultsForSearch: 0,
    ...
).on('select2:opening select2:closing', function (event) 
    //Disable original search (https://select2.org/searching#multi-select)
    var searchfield = $(this).parent().find('.select2-search__field');
    searchfield.prop('disabled', true);
);

【讨论】：

适配器很复杂，但这很有效:)

【参考方案4】：

如果以上答案都不适合您（新人），请考虑将所有内容都包含在 $(document).ready(function() // your select2 declaration here... ); 之间，有时这是一个常见问题！

【讨论】：

这更多是针对 jquery 实例化问题的一般故障排除步骤，不适用于 OP 的问题。