关于jquery：select2-隐藏搜索框

select2 - hiding the search box

对于我更重要的选择，Select2中的搜索框很棒。但是，在一个实例中，我仅选择了4个硬编码选项。在这种情况下，搜索框是多余的，看起来有点傻。有可能将其隐藏吗？我在线浏览了文档，在构造函数中找不到任何选项。

当然，我可以只使用常规的HTML选择，但是为了保持一致，如果可能的话，我想使用Select2。

相关讨论

参见https://github.com/ivaynberg/select2/issues/489上的该线程，您可以通过将minimumResultsForSearch设置为负值来隐藏搜索框。

1
2
3

$('select').select2({
minimumResultsForSearch: -1
});

相关讨论

在其"示例"页面上：https://select2.org/searching#hiding-the-search-box

1
2
3

$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});

1
2
3
4
5
6
7

.no-search .select2-search {
display:none
}

$("#test").select2({
dropdownCssClass : 'no-search'
});

相关讨论

版本4.0.3

尽量不要将用户界面要求与JavaScript代码混在一起。

您可以使用以下属性将搜索框隐藏在标记中：

data-minimum-results-for-search="Infinity"

标记

1	<select class="select2" data-minimum-results-for-search="Infinity"></select>

例

1
2
3

$(document).ready(function() {
$(".select2").select2();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用jQuery删除输入对我有用：

1	$(".select2-search, .select2-focusser").remove();

相关讨论

如果要隐藏特定下拉菜单的搜索，请使用id属性。

1	$('#select_id').select2({ minimumResultsForSearch: -1 });

这是最好的解决方案，干净且工作良好：

1 2	$("#select2Id").select2 () ; $("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

然后，创建一个类.hidden { display;none; }

相关讨论

如果选择显示结果，则必须使用此方法：

1	$('#yourSelect2ControlId').select2("close").parent().hide();

它关闭搜索结果框，然后将控件设置为不可见

我喜欢根据select中的选项数量动态地执行此操作；隐藏具有10个或更少结果的选择搜索，我这样做：

1
2
3

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

1
2
3
4
5
6
7
8
9
10

//Disable a search on particular selector
$(".my_selector").select2({
placeholder:"áREAS(todas)",
tags: true,
width:'100%',
containerCssClass:"area_disable_search_input" // I add new class
});

//readonly prop to selector class
$(".area_disable_search_input input").prop("readonly", true);

如果要在初次打开时隐藏并且要通过ajax调用填充下拉列表，请在select2声明的ajax块中添加以下内容：

1
2
3
4

beforeSend: function ()
{
$('.select2-search--dropdown').addClass('hidden');
}

要在ajax请求成功后再次显示(并集中显示)，请执行以下操作：

1
2
3
4

success: function() {
$('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
$('.select2-search__field')[0].focus();
}

如果您在选择中具有多重属性，则此肮脏的hack起作用：

1
2
3
4
5
6

var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
multipleSelect.parent().find('.select2-search--inline').remove();
});

在此处查看文档https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

你可以试试这个

1	$('#select_id').select2({ minimumResultsForSearch: -1 });

它关闭搜索结果框，然后将控件设置为不可见

您可以在select2文档中查询select2文档

1 2	//readonly on all select2 input $(".select2-search input").prop("readonly", true);

试试这个CSS

1
2
3

input[aria-controls=select2-product-type-results]{
display: none;
}

此输入是搜索字段

我编辑了select2.min.js文件，将生成的select-2__search输入字段设置为readonly="true"。

@Misha Kobrin的回答对我来说很有效，所以我决定进一步解释

您想隐藏搜索框，您可以使用jQuery完成。

例如，您已经在具有ID受众群体的下拉菜单中初始化了select2插件

1 2	element_select = '#audience';// id or class $(element_select).select2("close").parent().hide();

该示例适用于select2可在其上运行的所有设备。

对于多选，您必须编写js代码，没有设置属性。

1
2
3
4
5
6

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
var $searchfield = $(this).parent().find('.select2-search__field');
$searchfield.prop('disabled', true);
});

在他们的页面上提到了这一点：https://select2.org/searching#multi-select