select2 - 隐藏搜索框

Question

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

我当然可以使用常规的html选项，但为了保持一致性，我希望尽可能使用Select2。

Answer 1

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

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

Answer 2

拆卸与jQuery的投入工作对我来说：

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

Answer 3

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

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

Answer 4

如果选择是显示结果中的一个已使用此：

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

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

Answer 5

这是最好的解决方案，清洁和良好的工作：

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

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

Answer 6

你可以把.select2盒一个div，然后隐藏在div而非实际.select2框

$('#parentDiv').hide();

<div id="parentDiv"> 
 
    <select id="myHiddenField"></select> 
 
</div>

Answer 7

@Misha科布林对我的回答工作做好所以我决定来解释它更多

你想隐藏搜索框，你可以通过jQuery做到这一点。

例如，你已经初始化选择2插件上的下拉ID为观众

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

的示例工作在其上选择2作品的所有设备。

Answer 8

我喜欢根据select中选项的数量动态地执行此操作;隐藏与10分或更少的结果选择搜索，我做的：

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

Answer 9

这是他们的榜样页：https://select2.github.io/examples.html#hide-search

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

Answer 10

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

Answer 11

//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); 

Answer 12

版本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 13

我编辑的select2.min.js文件来设置系统产生于readonly="true"的select-2__search输入字段。

Answer 14

如果你想隐藏在初次打开，你是通过填充Ajax调用的下拉列表中，添加以下到AJAX块在你选择2声明：

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