select2 - 隐藏搜索框

Question

对于我更重要的选择,Select2中的搜索框非常棒.但是,在一个例子中,我有一个简单的4个硬编码选择.在这种情况下,搜索框是多余的,看起来有点傻.有可能以某种方式隐藏它吗？我在线查看了文档,但在构造函数中找不到任何选项.

当然,我可以使用常规的html选择,但为了保持一致性,我想尽可能使用Select2.

Answer 1

请参阅此主题https://github.com/ivaynberg/select2/issues/489,您可以通过将minimumResultsForSearch设置为负值来隐藏搜索框.

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

Answer 2

它位于他们的示例页面上:https://select2.org/searching#hiding-the-search-box

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

Answer 3

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

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

Answer 4

版本4.0.3

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

您可以使用以下属性隐藏标记中的搜索框:

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

标记

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

例

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

Answer 5

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

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

Answer 6

您可以设置infinity或-1forminimumResultsForSearch选项

解决方案1

参考：https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

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

解决方案2

参考： https: //select2.org/searching#hiding-the-search-box

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

Answer 7

如果您想隐藏对特定下拉列表的搜索，请使用 id 属性。

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