web-dev-qa-db-fra.com

Comment supprimer le champ de recherche de Chosen JS?

Sur github, il est indiqué que la zone de recherche était désormais facultative dans les zones de sélection choisies. Est-ce que quelqu'un sait comment l'enlever?

javascriptjquery-chosen
18
Samir

La version actuelle de Chosen fournit deux méthodes pour contrôler l’affichage du champ de recherche. Les deux sont passés en tant qu'options lors de l'initialisation. Pour masquer complètement le champ de recherche, activez l'option "disable_search": true:

$("#mySelect").chosen({
  "disable_search": true
});

Sinon, si vous souhaitez afficher la recherche ssi il existe un certain nombre d'options, utilisez l'option "disable_search_threshold": numberOfOptions (où numberOfOptions est le nombre minimum d'options requises avant d'afficher la zone de recherche):

$("#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>
43
thirdender

juste le cacher en cas de besoin avec

$('.chzn-search').hide();
2
Vince Lowe

selected.jquery.js vient de définir le style du champ de recherche display:none dans div avec la classe chzn-search

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