启用 select2 多 select 搜索框

Question

我需要能够使用 select2 向我的多 select 字段添加搜索框。

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

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

select2 不支持多 select 的搜索框吗？谁有类似功能的好替代品？

Answer 1

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

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

如果设置为加载远程ajax数据，其实是保留搜索框的，但对于没有数据源的多选，输入的是搜索栏，比较直观

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

Answer 2

select2 v4.0.3

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

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

另外：到

Answer 3

如果上面的 none 答案对您（新手）有用，请考虑将所有内容包装在 $(document).ready(function() { // your select2 declaration here... }); 之间，有时这是一个常见问题！

Answer 4

您可以使用 dropdownAdapter 选项来设置原始 Dropdown with SearchBox。这段代码对我有用（select2 v. 4.0.13）：

//Set Dropdown with SearchBox via dropdownAdapter option (
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);
});

启用 select2 多 select 搜索框

Enable select2 multi-select search box

javascript

jquery

jquery-select2

select2