select2: nasconde la casella di ricerca

Per le mie selezioni più significative, la casella di ricerca in Select2 è meravigliosa. Tuttavia, in un caso, ho una semplice selezione di 4 scelte codificate. In questo caso, la casella di ricerca è superflua e sembra essere un po 'sciocca. È possibile nasconderlo in qualche modo? Ho dato un'occhiata alla documentazione online e non ho trovato alcuna opzione per questo nel costruttore.

Ovviamente, potrei semplicemente usare una normale selezione HTML, ma per coerenza vorrei usare Select2 se possibile.

Vedi questa discussione https://github.com/ivaynberg/select2/issues/489 , puoi nascondere la casella di ricerca impostando minimumResultsForSearch su un valore negativo.

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

È sulla loro pagina di esempi: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    display: none
}

$ ( "# Test"). Select2 ({
    dropdownCssClass: 'no-search'
}); 

Versione 4.0.3

Cerca di non mescolare i requisiti dell'interfaccia utente con il tuo codice JavaScript.

Puoi nascondere la casella di ricerca nel markup con l'attributo:

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

markup

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

Esempio

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

Rimuovere gli input con jQuery funziona per me:

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

Questa è la soluzione migliore, pulita e funzionante:

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

Quindi, crea una classe .hidden { display;none; }

Se desideri nascondere la ricerca di un menu a discesa specifico, utilizza l'attributo id.

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

Se la selezione mostra i risultati, è necessario utilizzare questo:

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

chiude la casella dei risultati della ricerca e quindi imposta il controllo non visibile

Mi piace farlo in modo dinamico a seconda del numero di opzioni nella selezione; per nascondere la ricerca di selezioni con 10 o meno risultati, faccio:

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

Se hai più attributi nella tua selezione, questo hack sporco funziona:

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();
});

vedere i documenti qui https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Se si desidera nascondere all'apertura iniziale e si sta popolando il menu a discesa tramite chiamata ajax, aggiungere quanto segue al blocco ajax nella dichiarazione select2:

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

Per poi mostrarlo di nuovo (e focalizzare) dopo che la tua richiesta Ajax ha esito positivo:

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

Puoi provare questo

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

chiude la casella dei risultati della ricerca e quindi imposta il controllo non visibile

Puoi controllare qui nel documento select2 documenti select2 documenti

La risposta di @Misha Kobryn funziona bene per me Quindi ho deciso di spiegarlo di più

Vuoi nascondere la casella di ricerca, puoi farlo da jQuery.

ad esempio hai inizializzato il plugin select2 in un menu a discesa con pubblico id

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

L'esempio funziona su tutti i dispositivi su cui funziona select2.

Ho modificato il select2.min.jsfile per impostare il select-2__searchcampo di input a cui è stato generato readonly="true".

Per la selezione multipla devi scrivere il codice js, non ci sono proprietà settings.

$('#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);
});

Questo è menzionato nella loro pagina: https://select2.org/searching#multi-select

prova questo CSS

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

questo input è il campo di ricerca