CODEWITHSUNDEEP
javascriptjquery-chosen
Tyler
Tyler

Reputation: 3813

How to remove search box from Chosen JS?

On github it says that the search box was now optional in the chosen select boxes. Does anyone know how to remove it?

Upvotes: 22

Views: 23992

Answers (3)

thirdender
thirdender

Reputation: 3951

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>

Upvotes: 50

Vince Lowe
Vince Lowe

Reputation: 3620

just hide it when needed with

$('.chzn-search').hide();

Upvotes: 3

Sain Pradeep
Sain Pradeep

Reputation: 3125

chosen.jquery.js just set the style of search box display:none in div with class chzn-search

<div class="chzn-search"><input type="text" autocomplete="off" style="display:none;" /></div>

Upvotes: 0

Related Questions