On github it says that the search box was now optional in the chosen select boxes. Does anyone know how to remove it?
The current version of Chosen provides 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:
$(#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 numberOfOptions is the minimum number of options required before showing the search box):
$(#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>
