我需要能够使用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不支持多选的搜索框吗?有没有人有类似功能的替代品?
答案 0 :(得分:10)
答案是select2输入元素成为没有后端数据的多个选择的搜索框
如果您开始输入,您的结果将开始过滤选项
如果你将它设置为加载远程ajax数据,它实际上会保留一个搜索框,但对于没有数据源的多个选择,输入是搜索栏,这是相当直观的
答案 1 :(得分:5)
select2 v4.0.3
<select class="smartsearch_keyword" name="keyword[]" id="keyword" style="width:100%;"></select>
$(".smartsearch_keyword").select2({
multiple: true,
...
});
答案 2 :(得分:1)
您可以使用 dropdownAdapter 选项设置原始的通过SearchBox进行下拉。 这段代码对我有用(select2 v。4.0.13):
//Set Dropdown with SearchBox via dropdownAdapter option (https://stackoverflow.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);
});
答案 3 :(得分:0)
如果以上答案都对您(新手)无济于事,请考虑将所有内容包装在$(document).ready(function() { // your select2 declaration here... });
之间,有时这是一个常见问题!