select2 - Suchfeld ausblenden

Für meine wichtigeren Auswahlen ist das Suchfeld in Select2 wunderbar. In einem Fall habe ich jedoch eine einfache Auswahl von 4 fest codierten Auswahlmöglichkeiten. In diesem Fall ist das Suchfeld überflüssig und sieht etwas albern aus. Kann man es irgendwie verstecken? Ich habe die Dokumentation online durchgesehen und konnte im Konstruktor keine Optionen dafür finden.

Ich könnte natürlich nur eine normale HTML-Auswahl verwenden, aber aus Gründen der Konsistenz würde ich wenn möglich Select2 verwenden.

In diesem Thread https://github.com/ivaynberg/select2/issues/489 können Sie das Suchfeld ausblenden, indem Sie minimalResultsForSearch auf einen negativen Wert setzen.

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

Es befindet sich auf der Beispielseite: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    Anzeige: keine
}}

$ ("# test"). select2 ({
    dropdownCssClass: 'keine Suche'
}); 

Version 4.0.3

Versuchen Sie, die Anforderungen der Benutzeroberfläche nicht mit Ihrem JavaScript-Code zu mischen.

Sie können das Suchfeld im Markup mit dem Attribut ausblenden:

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

Markup

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

Beispiel

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

Das Entfernen der Eingaben mit jQuery funktioniert bei mir:

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

Dies ist die beste Lösung, sauber und funktioniert gut:

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

Erstellen Sie dann eine Klasse .hidden { display;none; }

Wenn Sie die Suche nach einem bestimmten Dropdown-Menü ausblenden möchten, verwenden Sie dazu das Attribut id.

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

Wenn die Auswahl Ergebnisse anzeigen lautet, muss Folgendes verwendet werden:

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

Es schließt das Suchergebnisfeld und setzt die Steuerung nicht sichtbar

Ich mache das gerne dynamisch, abhängig von der Anzahl der Optionen in der Auswahl. Um die Suche nach Auswahlen mit 10 oder weniger Ergebnissen auszublenden, gehe ich wie folgt vor:

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

Wenn Sie mehrere Attribute in Ihrer Auswahl haben, funktioniert dieser schmutzige Hack:

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

Siehe Dokumente hier https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Wenn Sie sich beim ersten Öffnen ausblenden möchten und die Dropdown-Liste über einen Ajax-Aufruf füllen, fügen Sie dem Ajax-Block in Ihrer select2-Deklaration Folgendes hinzu:

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

So zeigen Sie es nach erfolgreicher Ajax-Anfrage erneut an (und konzentrieren sich darauf):

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

Sie können dies versuchen

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

Es schließt das Suchergebnisfeld und setzt die Steuerung nicht sichtbar

Sie können hier in select2 document select2 documents nachsehen

@ Mischa Kobrins Antwort funktioniert gut für mich Also habe ich beschlossen, es mehr zu erklären

Wenn Sie das Suchfeld ausblenden möchten, können Sie dies mit jQuery tun.

Sie haben beispielsweise das select2-Plugin in einem Dropdown-Menü mit ID-Zielgruppe initialisiert

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

Das Beispiel funktioniert auf allen Geräten, auf denen select2 funktioniert.

Ich habe die select2.min.jsDatei bearbeitet , um das select-2__searchEingabefeld festzulegen, auf das generiert wird readonly="true".

Für die Mehrfachauswahl müssen Sie js-Code schreiben, es gibt keine Einstellungseigenschaft.

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

Dies wird auf ihrer Seite erwähnt: https://select2.org/searching#multi-select

Versuchen Sie dieses CSS

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

Diese Eingabe ist ein Suchfeld