select2: ocultar el cuadro de búsqueda

Para mis selecciones más significativas, el cuadro de búsqueda en Select2 es maravilloso. Sin embargo, en un caso, tengo una selección simple de 4 opciones codificadas. En este caso, el cuadro de búsqueda es superfluo y parece un poco tonto estar presente. ¿Es posible ocultarlo de alguna manera? Eché un vistazo a la documentación en línea y no pude encontrar ninguna opción para esto en el constructor.

Podría, por supuesto, usar una selección html normal, pero por coherencia me gustaría usar Select2 si es posible.

Vea este hilo https://github.com/ivaynberg/select2/issues/489 , puede ocultar el cuadro de búsqueda estableciendo un valor mínimo de valores mínimos de búsqueda en un valor negativo.

$('select').select2({
    minimumResultsForSearch: -1
});

Está en su página de ejemplos: https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

.no-search .select2-search {
    pantalla: ninguno
}

$ ("# prueba"). select2 ({
    dropdownCssClass: 'no-search'
}); 

Version 4.0.3

Intente no mezclar los requisitos de la interfaz de usuario con su código JavaScript.

Puede ocultar el cuadro de búsqueda en el marcado con el atributo:

data-minimum-results-for-search="Infinity"

Margen

<select class="select2" data-minimum-results-for-search="Infinity"></select>

Ejemplo

$(document).ready(function() {
  $(".select2").select2();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

Eliminar las entradas con jQuery funciona para mí:

$(".select2-search, .select2-focusser").remove();

Esta es la mejor solución, limpia y funciona bien:

$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

Luego, crea una clase .hidden { display;none; }

Si desea ocultar la búsqueda de un menú desplegable específico, use el atributo id para eso.

$('#select_id').select2({ minimumResultsForSearch: -1 });

Si la selección es mostrar resultados, uno tiene que usar esto:

$('#yourSelect2ControlId').select2("close").parent().hide();

cierra el cuadro de resultados de búsqueda y luego establece el control invisible

Me gusta hacer esto dinámicamente dependiendo del número de opciones en la selección; para ocultar la búsqueda de selecciones con 10 o menos resultados, hago:

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

//Disable a search on particular selector
$(".my_selector").select2({
    placeholder: "ÁREAS(todas)",
    tags: true,
    width:'100%',
    containerCssClass: "area_disable_search_input" // I add new class 
});

//readonly prop to selector class
$(".area_disable_search_input input").prop("readonly", true);

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

Si tiene múltiples atributos en su selección, este truco sucio funciona:

var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
    multipleSelect.parent().find('.select2-search--inline').remove();
});

ver documentos aquí https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Si desea ocultarse en la apertura inicial y está completando el menú desplegable a través de una llamada ajax, agregue lo siguiente al bloque ajax en su declaración select2:

beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }

Para mostrarlo nuevamente (y enfocarse) después de que su solicitud ajax sea exitosa:

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

Puedes probar esto

$('#select_id').select2({ minimumResultsForSearch: -1 });

cierra el cuadro de resultados de búsqueda y luego establece el control invisible

Puede consultar aquí en el documento select2 documentos select2

La respuesta de @Misha Kobrin funciona bien para mí, así que he decidido explicarlo más

Si quieres ocultar el cuadro de búsqueda, puedes hacerlo con jQuery.

por ejemplo, ha inicializado el complemento select2 en un menú desplegable que tiene audiencia de identificación

element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();

El ejemplo funciona en todos los dispositivos en los que funciona select2.

Edité el select2.min.jsarchivo para establecer el select-2__searchcampo de entrada que se genera readonly="true".

Para la selección múltiple, debe escribir el código js, ​​no hay propiedades de configuración.

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

Esto se menciona en su página: https://select2.org/searching#multi-select

prueba este CSS

input[aria-controls=select2-product-type-results]{
  display: none;
}

esta entrada es el campo de búsqueda