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.
jquery
jquery-select2
EleventyOne
quelle
quelle
hide
Methode 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).Antworten:
In diesem Thread https://github.com/ivaynberg/select2/issues/489 können Sie das Suchfeld ausblenden, indem Sie minimalResultsForSearch auf einen negativen Wert setzen.
quelle
Infinity
ist 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.Es befindet sich auf der Beispielseite: https://select2.org/searching#hiding-the-search-box
quelle
quelle
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
Beispiel
quelle
Das Entfernen der Eingaben mit jQuery funktioniert bei mir:
quelle
Dies ist die beste Lösung, sauber und funktioniert gut:
Erstellen Sie dann eine Klasse
.hidden { display;none; }
quelle
Wenn Sie die Suche nach einem bestimmten Dropdown-Menü ausblenden möchten, verwenden Sie dazu das Attribut id.
quelle
Wenn die Auswahl Ergebnisse anzeigen lautet, muss Folgendes verwendet werden:
Es schließt das Suchergebnisfeld und setzt die Steuerung nicht sichtbar
quelle
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:
quelle
quelle
quelle
Wenn Sie mehrere Attribute in Ihrer Auswahl haben, funktioniert dieser schmutzige Hack:
Siehe Dokumente hier https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets
quelle
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:
So zeigen Sie es nach erfolgreicher Ajax-Anfrage erneut an (und konzentrieren sich darauf):
quelle
Sie können dies versuchen
Es schließt das Suchergebnisfeld und setzt die Steuerung nicht sichtbar
Sie können hier in select2 document select2 documents nachsehen
quelle
@ 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
Das Beispiel funktioniert auf allen Geräten, auf denen select2 funktioniert.
quelle
Ich habe die
select2.min.js
Datei bearbeitet , um dasselect-2__search
Eingabefeld festzulegen, auf das generiert wirdreadonly="true"
.quelle
Für die Mehrfachauswahl müssen Sie js-Code schreiben, es gibt keine Einstellungseigenschaft.
Dies wird auf ihrer Seite erwähnt: https://select2.org/searching#multi-select
quelle
Versuchen Sie dieses CSS
Diese Eingabe ist ein Suchfeld
quelle