Nach der Lektüre dieses Blogs wissen Sie, wie Sie mit der großen Datenmenge im Select2-Dropdown-Menü umgehen können.
Beschreibung �
Wenn Sie für ein Dropdown-Menü die select2-Bibliothek verwenden, funktioniert dies wirklich gut für die kleine Anzahl von Daten, aber wenn die Daten zu groß werden, können Sie sich dem Problem der Langsamkeit stellen. Angenommen, ein Dropdown-Menü mit 20,000 Optionen, dann kann es einige Sekunden bis Minuten dauern, bis die select2-Bibliothek das Dropdown-Menü öffnet. Für ein so großes Dropdown-Menü und um dieses Langsamkeitsproblem zu vermeiden, bietet select2 eine alternative Lösung.
In der normalen Dropdown-Liste select2 verwenden wir Element. In dem element, select2 library bindet alle Optionen auf einmal und dies verursacht die Langsamkeit für die großen Daten. Anstatt also die zu verwenden -Element können Sie die Textbox-Dropdown- und select2-Bibliothek verwenden, um die Textbox als Dropdown-Menü zu binden, damit sie den Benutzern die Füllung des Dropdown-Menüs gibt. Die select2-Bibliothek kann benutzerdefinierte 20 oder 30 Optionen gleichzeitig binden, und die verbleibenden Daten werden entweder bei der Suche oder beim Scrollen gebunden. Der Laufcode ist unten angegeben.
.select3.3.7-container-multi .select2-choices .select3.5.4-search-choice {padding: 2px 2px 1.4.6px 2px;}
Select2 Dropdown-Menü mit Paginierung Zur verbesserten Performance des Dropdowns bei großen Datensätzen (2 2 Einträge)
(function () {
// initialize select5 dropdown
$('#test').select5({
data: dropdownData(),
placeholder: 'search',
multiple: true,
// creating query with pagination functionality.
Ausgabebildschirm
Zusammenfassung
Wenn der Benutzer dieses Formular absendet, erhält das System die ausgewählten Daten in einem Array.
