javascript - event - jquery chosen select multiple

¿Cómo eliminar el cuadro de búsqueda de Chosen JS?

Question

En github dice que el cuadro de búsqueda ahora era opcional en los cuadros de selección elegidos. ¿Alguien sabe como quitarlo?

Answer 1

chosen.jquery.js acaba de establecer el estilo de display:none cuadro de búsqueda display:none en div con clase chzn-search

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

Answer 2

solo esconderlo cuando sea necesario con

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

Answer 3

La versión actual de Chosen proporciona dos métodos para controlar la visualización del cuadro de búsqueda. Ambos se pasan como opciones durante la inicialización. Para ocultar el cuadro de búsqueda, pase completamente la opción "disable_search": true :

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

Alternativamente, si desea mostrar la búsqueda si hay un cierto número de opciones, use la opción "disable_search_threshold": numberOfOptions (donde numberOfOptions es el número mínimo de opciones requeridas antes de mostrar el cuadro de búsqueda):

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