select2 - Suchfeld ausblenden

206

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.

EleventyOne
quelle
Danke für die Idee. Obwohl ich über .show () und .hide () in jQuery Bescheid wusste, kam mir nicht der Gedanke, dass das Plug-In weiterhin funktionieren würde, wenn ich so etwas außerhalb seiner eigenen Optionen tun würde. Trotzdem scheint es auf den ersten Blick zu funktionieren :)
EleventyOne
Können Sie erklären, was die Methode hide tut und wie sie funktioniert? Wollen Sie mir sagen, dass es nur das Suchfeld verbirgt, weil das überhaupt nicht der Fall zu sein scheint
IcedDante
@IcedDante Die hideMethode wird hier beschrieben: api.jquery.com/hide Solange Sie sie nur auf den entsprechenden Selektor anwenden, sollte das Suchfeld nur ausgeblendet werden . Trotzdem gibt es Plugin-spezifische Methoden, mit denen es ausgeblendet werden kann. Ich würde empfehlen, dass Sie stattdessen verwenden (siehe unten).
EleventyOne

Antworten:

473

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
});
Blue Smith
quelle
14
Das Hauptproblem hier, wie im Ticket auf Github erwähnt, ist auf dem Handy, es zeigt immer noch die Tastatur. Wir haben select2 durch selected ersetzt.
toutpt
2
und es übersetzt perfekt zu angle-ui ui-select2!
Rhigdon
Sehr praktische Option! Ich habe es verwendet, um die Suche nach 10 und mehr Optionen anzuzeigen. Das manuelle Entfernen von Sucheingaben ist nicht erforderlich.
Blazkovicz
@ KevinBrown Infinityist kein negativer Wert. Durch Ihre Bearbeitung stimmen Text und Code nicht überein. Das damit verbundene Problem weist ausdrücklich darauf hin, dass ein negativer Wert der richtige unterstützte Ansatz ist. Das damit verbundene Problem besagt außerdem, dass "Hoher Wert von MinimumResultsForSearch nur das Suchfeld in der geöffneten Auswahl verbirgt. Wenn wir jedoch einen Buchstaben eingeben, während die Auswahl geschlossen und fokussiert ist, wird die Suche angezeigt, egal wie hoch sie ist", und obwohl ich dieses bestimmte Problem nicht reproduzieren kann In der aktuellen Version ist dies in älteren Versionen wahrscheinlich ein echtes Problem. Aus diesen Gründen habe ich Ihre Bearbeitung zurückgesetzt.
1
Die Suchfunktion wird jedoch vollständig deaktiviert.
Sudip
34
.no-search .select2-search {
    Anzeige: keine
}}

$ ("# test"). select2 ({
    dropdownCssClass: 'keine Suche'
}); 
xicooc
quelle
1
+1 Ich mag dies, da es verhindert, dass das Suchfeld kurz in der Benutzeroberfläche angezeigt wird, während eine AJAX-Anfrage gestellt wird. Dies gilt auch für den -1-Hack.
SimonGates
Dies ist definitiv die beste Antwort auf die Frage, da sie Ereignisse wie "Suchen ..." wirklich verhindert.
Sarin Suriyakoon
5
Hat perfekt funktioniert, danke! Nur ein Hinweis für zukünftige Googler, dies erfordert die Vollversion select2 (select2.full. *), Wie hier angegeben: github.com/select2/select2/issues/2879#issuecomment-149940634
Othyn
1
Danke, es ist das, wonach ich gesucht habe, da es auch bei ausgeblendetem Suchfeld ermöglicht, die Suchfunktion verfügbar zu halten, wenn Sie es programmgesteuert aufrufen möchten: $ ("# myselect"). Select2 ("search", "search_value")
nicolas
Dies ist in der Tat die beste Option. Wie @Othyn sagt, wird die Vollversion benötigt select2.full.min.js wie auf der Website dokumentiert: select2.github.io
robbpriestley
26

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>

Aaron Hudon
quelle
20

Das Entfernen der Eingaben mit jQuery funktioniert bei mir:

$(".select2-search, .select2-focusser").remove();
Arkaitz Garro
quelle
Perfekt, auf dem Handy wird die Tastatur nicht angezeigt!
Pieter Meiresone
Dies funktioniert für alle Dropdowns auf der Seite, aber ich kann nicht nur auf bestimmte Dropdowns abzielen. Kann nicht als Ziel ausgewählt werden, da sie keine untergeordneten Elemente der select2-ID sind.
Shaun Lebron
2
Fügen
3

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

YWA
quelle
Dies hat in der Vergangenheit möglicherweise gut funktioniert, funktioniert jedoch nicht mit der neuesten Version von select2.
Matt Browne
3

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

$('#select_id').select2({ minimumResultsForSearch: -1 });
Saifur Rahman
quelle
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

MKK
quelle
1

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 });
Mike Campbell
quelle
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);
Juan Manuel De Castro
quelle
1
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
Juan Manuel De Castro
quelle
1

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

ivanbogomolov
quelle
1

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

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

Foram Thakral
quelle
0

@ 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.

Shahbaz
quelle
0

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

capcom
quelle
0

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

Faisal Ghaffar
quelle
0

Versuchen Sie dieses CSS

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

Diese Eingabe ist ein Suchfeld

Vajiheh Habibi
quelle