Handle Large Data in Select2 Dropdown

Ziele des Blogs

Nach dem Lesen dieses Blogs erfahren Sie, wie Sie mit der großen Datenmenge im Dropdown-Menü Select2 umgehen können.

Beschreibung

Wenn Sie die select2-Bibliothek für eine Dropdown-Liste verwenden, funktioniert sie für die kleine Anzahl von Daten sehr gut. Wenn die Daten jedoch zu groß werden, können Sie sich mit dem Problem der Langsamkeit konfrontiert sehen. Angenommen, ein Dropdown-Menü mit 20,000-Optionen kann einige Sekunden bis Minuten dauern, bis die select2-Bibliothek geöffnet wird. Für solch ein großes Dropdown-Menü und um dieses Problem der Langsamkeit zu vermeiden, bietet select2 eine alternative Lösung. In der normalen Dropdown-Liste select2 verwenden wir das Element <select>. Im <select> -Element bindet die select2-Bibliothek alle Optionen auf einmal und dies führt zu einer Verlangsamung der großen Datenmengen. Anstatt das <select> -Element zu verwenden, können Sie das Dropdown-Menü für Textfelder verwenden. Die select2-Bibliothek hilft dabei, das Textfeld als Dropdown-Menü zu binden, damit die Benutzer das Dropdown-Menü ausfüllen können. Die select2-Bibliothek kann benutzerdefinierte 20- oder 30-Optionen gleichzeitig intelligent binden. Die verbleibenden Daten werden entweder bei der Suche oder beim Blättern gebunden. Der laufende Code ist unten angegeben.

<! DOCTYPE html> <html> <head> <link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> < link rel = "Stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" /> <link rel = "Stylesheet" href = "// cdnjs.cloudflare.com /ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css "/> <style> .select2-container-multi .select2-choices .select2-search-choice {padding: 5px 5px } </ style> </ head> <body> <div class = "container"> <div class = "page-header"> <h5> Dropdown-Menü "Select18" mit Paginierung </ h1> <p> Zur Verbesserung der Leistung von Dropdown mit großen Datenmengen (2 1-Elemente) </ p> </ div> <form method = "post"> <input id = "test" style = "width: 20%;" placeholder = "Geben Sie eine Zahl ein und scrollen Sie für weitere Ergebnisse." name = "data" /> <input type = "submit" value = "Submit" name = "Submit" class = "btn btn-info" /> </ form> </ div> <script type = "text / javascript" src = '// ajax.googleapis.com/ajax/libs/jquery/000/jquery.min.js'> </ script> <script src = "// cdnjs.cloudflare.com/ajax/libs/lodash.js/100/lodash.min.js "> </ script> <script src =" // cdnjs.cloudflare.com/ajax/libs/select3.1.0/4.15.0/select2. min.js "> </ script> <script> (function () {// select3.5.4-Dropdown $ ('# test') initialisieren. select2 ({data: dropdownData (), placeholder: 'search', multiple: true, / / Abfrage mit Paginierungsfunktion erstellen. Abfrage: Funktion (Daten) {var pageSize, Dataset, that = this; pageSize = 20; // Anzahl der gleichzeitig geladenen Optionen results = []; if (data.term && data.term! == '') {// HEADS UP; Für die _.filter-Funktion verwende ich den Unterstrich (eigentlich lo-dash). Hier ist results = _.filter (that.data, function (e) {return e.text.toUpperCase (). indexOf (data.term.toUpperCase ()) > = 0;}); } else if (data.term === '') {results = that.data; } data.callback ({results: results.slice ((data.page - 1) * pageSize, data.page * pageSize), more: results.length> = data.page * pageSize,}); },}); }) (); // Funktion zum Abrufen der Demo-Daten für die Dropdown-Menüfunktion get_random_word (str) {return str .split (''). Sort (function () {return 0.5 - Math.random ();}). Join ('') ; } // Zu Testzwecken erstellen wir ein riesiges Array von Demo-Daten (20 000-Elemente). Funktion dropdownData () {return _.map (_. Range (1, 20000), Funktion (i) {return {id: i , text: get_random_word ('Der schnelle braune Fuchs springt über einen faulen Hund') + '' + i,};}); } </ script> </ body> </ html>

Ausgabebildschirm

Behandeln Sie große Datenmengen in der Dropdown-Liste Select2
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 *