jquery - disable - select2 selected

select2-ocultando el cuadro de búsqueda

Question

Para mis selecciones más significativas, el cuadro de búsqueda en Select2 es maravilloso. Sin embargo, en una instancia, 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.

Por supuesto, podría usar una selección regular de html, pero para ser consistentes, me gustaría usar Select2 si es posible.

Answer 1

Consulte este hilo https://github.com/ivaynberg/select2/issues/489 , puede ocultar el cuadro de búsqueda estableciendo minimumResultsForSearch en un valor negativo.

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

Answer 2

Edité el archivo select2.min.js para establecer el campo de entrada select-2__search que se generó para readonly="true" .

Answer 3

Eliminar las entradas con jQuery funciona para mí:

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

Answer 4

Está en su página de ejemplos: https://select2.github.io/examples.html#hide-search

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

Answer 5

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; } .hidden { display;none; }

Answer 6

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

Si desea ocultar el cuadro de búsqueda, puede hacerlo mediante jQuery.

por ejemplo, has inicializado el complemento select2 en un menú desplegable que tiene una audiencia id.

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

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

Answer 7

Me gusta hacer esto de forma dinámica 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 });

Answer 8

Si el seleccionar 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

Answer 9

Si quiere 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''); }

Answer 10

Versión 4.0.3

Intenta no mezclar los requisitos de la interfaz de usuario con tu 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>

Answer 11

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

Answer 12

//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);

Answer 13

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