jQuery select2 - 隐藏搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17480040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select2 - hiding the search box
提问by EleventyOne
For my more significant selects, the search box in Select2 is wonderful. However, in one instance, I have a simple select of 4 hard-coded choices. In this case, the search box is superfluous and looks a little silly being present. Is it possible to hide it somehow? I took a look through the documentation online and couldn't find any options for this in the constructor.
对于我更重要的选择，Select2 中的搜索框很棒。然而，在一个例子中，我有 4 个硬编码选项的简单选择。在这种情况下，搜索框是多余的，看起来有点傻。有没有可能以某种方式隐藏它？我浏览了在线文档，在构造函数中找不到任何选项。
I could, of course, just use a regular html select, but for consistency I'd like to use Select2 if possible.
当然，我可以只使用常规的 html 选择，但为了保持一致性，如果可能，我想使用 Select2。
回答by Blue Smith
See this thread https://github.com/ivaynberg/select2/issues/489, you can hide the search box by setting minimumResultsForSearch to a negative value.
请参阅此线程https://github.com/ivaynberg/select2/issues/489，您可以通过将 minimumResultsForSearch 设置为负值来隐藏搜索框。
$('select').select2({
minimumResultsForSearch: -1
});
回答by Sabin
It's on their Examples page: https://select2.org/searching#hiding-the-search-box
它在他们的示例页面上：https: //select2.org/searching#hiding-the-search-box
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
回答by xicooc
.no-search .select2-search {
display:none
}
$("#test").select2({
dropdownCssClass : 'no-search'
});
回答by Aaron Hudon
Version 4.0.3
版本 4.0.3
Try not to mix user interface requirements with your JavaScript code.
尽量不要将用户界面要求与 JavaScript 代码混合在一起。
You can hide the search box in the markup with the attribute:
您可以使用以下属性隐藏标记中的搜索框：
data-minimum-results-for-search="Infinity"
data-minimum-results-for-search="Infinity"
Markup
标记
<select class="select2" data-minimum-results-for-search="Infinity"></select>
Example
例子
$(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>回答by Arkaitz Garro
Removing the inputs with jQuery works for me:
使用 jQuery 删除输入对我有用：
$(".select2-search, .select2-focusser").remove();
回答by YWA
This is the best solution, clean and work good :
这是最好的解决方案，干净且工作良好：
$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;
Then, create a class .hidden { display;none; }
然后，创建一个类 .hidden { display;none; }
回答by Saifur Rahman
If you want to hide search for a specific drop down use the id attribute for that.
如果您想隐藏特定下拉列表的搜索，请使用 id 属性。
$('#select_id').select2({ minimumResultsForSearch: -1 });
回答by ivanbogomolov
If you have multi attribute in your select, this dirty hack works:
如果您的选择中有 multi 属性，则此肮脏的 hack 有效：
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();
});
see docs here https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets
在此处查看文档https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets
回答by Foram Thakral
You can try this
你可以试试这个
$('#select_id').select2({ minimumResultsForSearch: -1 });
it closes the search results box and then set control unvisible
它关闭搜索结果框，然后将控件设置为不可见
You can check here in select2 document select2 documents
您可以在 select2 文档中查看此处select2 文档
回答by Juan Manuel De Castro
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
