Github上显示,在所选的选择框中,现在搜索框是可选的。有人知道如何去掉它吗?
目前版本的Chosen提供了两种控制搜索框显示的方法。这两种方法都是在初始化时作为选项传递的。如果要完全隐藏搜索框,请传入选项"disable_search": true
:
$("#mySelect").chosen({
"disable_search": true
});
或者,如果您想在有一定数量的选项时显示搜索框,请使用选项"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>
当需要时只需隐藏它即可
$('.chzn-search').hide();
chosen.jquery.js 只是在类名为 chzn-search
的 div 中设置了搜索框的样式为 display:none
<div class="chzn-search"><input type="text" autocomplete="off" style="display:none;" /></div>
<div class="no-search"><select class="chosen"></select></div>
和
$('.chosen').chosen();
使用CSS .no-search .chzn-search { display: none; }
。 - Galen