Javascript 如何从选择的 JS 中删除搜索框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12161354/
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
How to remove search box from Chosen JS?
提问by Tyler
On github it says that the search box was now optional in the chosen select boxes. Does anyone know how to remove it?
在 github 上，它说搜索框现在在所选的选择框中是可选的。有谁知道如何删除它？
回答by thirdender
The current version of Chosenprovides two methods to control the display of the search box. Both are passed in as options during initialization. To hide the search box completely pass in the option "disable_search": true:
Chosen的当前版本提供了两种方法来控制搜索框的显示。两者都在初始化期间作为选项传入。要完全隐藏搜索框，请传入选项"disable_search": true：
$("#mySelect").chosen({
"disable_search": true
});
Alternatively, if you want to show the search iff there are a certain number of options, use the option "disable_search_threshold": numberOfOptions(where numberOfOptionsis the minimum number of options required before showing the search box):
或者，如果您想在有一定数量的选项时显示搜索，请使用该选项"disable_search_threshold": numberOfOptions（其中numberOfOptions是显示搜索框之前所需的最小选项数）：
$("#mySelect").chosen({
"disable_search_threshold": 4
});
jQuery(function($) {
// Create a set of OPTION elements from some dummy data
var words = ["lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "duis", "ullamcorper", "diam", "sed", "lorem", "mattis", "tristique", "integer", "pharetra", "sed", "tortor"],
options = $($.map(words, function(word) {
return $(document.createElement('option')).text(word)[0];
}));
$('select').each(function() {
// Add the dummy OPTIONs to the SELECT
var select = $(this).append(options.clone());
// Initialize Chosen, using the options from the
// `data-chosen-options` attribute
select.chosen(select.data('chosen-options'));
});
});body {
font-family: sans-serif;
font-size: .8em; }
label {
display: block;
margin-bottom: 1.4em; }
label .label {
font-weight: bold;
margin-bottom: .2em; }
select {
width: 14em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<label>
<div class='label'>Default behavior</div>
<select name='default' data-chosen-options='{}'></select>
</label>
<label>
<div class='label'>No search at all</div>
<select name='no-search' data-chosen-options='{ "disable_search": true }'></select>
</label>
<label>
<div class='label'>Search iff more than 4 items</div>
<select name='conditional-search' data-chosen-options='{ "disable_search_threshold": 4 }'></select>
</label>
<label>
<div class='label'>Search iff more than 32 items</div>
<select name='conditional-search' data-chosen-options='{ "disable_search_threshold": 32 }'></select>
</label>回答by Vince Lowe
just hide it when needed with
只需在需要时隐藏它
$('.chzn-search').hide();
回答by Sain Pradeep
chosen.jquery.js just set the style of search box display:nonein div with class chzn-search
selected.jquery.js 只需display:none在 div 中使用 class设置搜索框的样式chzn-search
<div class="chzn-search"><input type="text" autocomplete="off" style="display:none;" /></div>
