select2 – 隐藏search框
对于我的更重要的select，在Select2的search框是美好的。 然而，在一个例子中，我有一个简单的4个硬编码select的select。 在这种情况下，search框是多余的，看起来有点傻。 有没有办法隐藏它？ 我在网上看了一下文档，在构造函数里找不到这个选项。
当然，我可以使用常规的html选项，但为了保持一致性，我希望尽可能使用Select2。
看到这个线程https://github.com/ivaynberg/select2/issues/489 ，您可以通过设置minimumResultsForSearch隐藏search框为负值。
$('select').select2({ minimumResultsForSearch: -1 });
.no-search .select2-search {
显示：无
}
$（ “＃testing”）。select2（{
dropdownCssClass：'不search'
}）;
使用jQuery去除input对我有效：
$(".select2-search, .select2-focusser").remove();
在它们的“示例”页面上： https ： //select2.github.io/examples.html#hide-search
$(".js-example-basic-hide-search").select2({ minimumResultsForSearch: Infinity });
版本4.0.3
尽量不要将用户界面要求与JavaScript代码混合在一起。
您可以使用以下属性隐藏标记中的search框：
data-minimum-results-for-search="Infinity"
标记
<select class="select2" data-minimum-results-for-search="Infinity"></select>
例
$(document).ready(function() { $(".select2").select2(); });
<link href="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>
这是最好的解决scheme，干净，工作良好：
$("#select2Id").select2 () ; $("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;
然后，创build一个类.hidden { display;none; } .hidden { display;none; }
如果select是显示结果必须使用这个：
$('#yourSelect2ControlId').select2("close").parent().hide();
它closuressearch结果框，然后将控件设置为不可见
我喜欢根据select中的选项数量dynamic地执行此操作; 隐藏search结果为10或更less的select，我做：
$fewResults = $("select>option:nth-child(11)").closest("select"); $fewResults.select2(); $('select').not($fewResults).select2({ minimumResultsForSearch : -1 });
//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);
//readonly on all select2 input $(".select2-search input").prop("readonly", true);
@Misha Kobrin的回答对我很好所以我决定更多地解释它
你想隐藏search框，你可以通过jQuery做到这一点。
例如，你已经初始化了select2插件的下拉有id观众
element_select = '#audience';// id or class $(element_select).select2("close").parent().hide();
该示例适用于select2工作的所有设备。
我编辑了select2.min.js文件，将生成的select-2__searchinput字段设置为readonly="true" 。
如果您想在初始打开时隐藏，并且您正在通过ajax调用填充下拉列表，请将以下内容添加到select2声明中的ajax块中：
beforeSend: function () { $('.select2-search--dropdown').addClass('hidden'); }
您可以将.select2框放在div中，然后隐藏div而不是实际的.select2框
$('#parentDiv').hide();
<div id="parentDiv"> <select id="myHiddenField"></select> </div>
