Handle Large Data in Select2 Dropdown

Handle Large Data in Select2 Dropdown

Ziele des Blogs

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.

Behandeln Sie große Datenmengen im Select2-Dropdown

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

Behandeln Sie große Datenmengen im Select2-Dropdown
Zusammenfassung

Wenn der Benutzer dieses Formular absendet, erhält das System die ausgewählten Daten in einem Array.

Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *