Handle Large Data in Select2 Dropdown

Obiettivi del blog

Dopo la lettura di questo blog, sarai in grado di sapere come gestire l'ampio set di dati nel menu a discesa Select2.

Descrizione

Per un menu a discesa, se si utilizza la libreria select2, funziona molto bene per il numero ridotto di dati, ma quando i dati diventano troppo grandi si può affrontare il problema della lentezza. Ad esempio, supponiamo che un menu a discesa di opzioni 20,000, quindi la libreria select2 possa richiedere fino a qualche secondo in minuti per aprire il menu a discesa. Per un menu a discesa così ampio e per evitare questo problema di lentezza, selezionare2 fornisce una soluzione alternativa. Nel normale menu a discesa select2, usiamo l'elemento <select>. Nell'elemento <select>, select2 library associa tutte le opzioni in una volta sola e ciò causa la lentezza dei dati di grandi dimensioni. Quindi, invece di usare l'elemento <select>, puoi usare il menu a tendina della casella di testo e selezionare la libreria 2 per collegare la casella di testo come menu a discesa in modo da fornire agli utenti il ​​riempimento del menu a discesa. La libreria select2 è in grado di associare in modo intelligente le opzioni 20 o 30 definite dall'utente alla volta e i dati rimanenti si collegheranno alla ricerca o allo scroll. Il codice corrente è indicato di seguito.

<! 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 5px 18px; } </ style> </ head> <body> <div class = "container"> <div class = "page-header"> <h1> Select2 Menu a discesa con impaginazione </ h1> <p> Per migliorare le prestazioni del menu a discesa con set di dati di grandi dimensioni (articoli 20 000) </ p> </ div> <form metodo = "post"> <input id = "test" style = "larghezza: 100%;" placeholder = "scrivi un numero, scorri per altri risultati" 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/3.1.0/jquery.min.js'> </ script> <script src = "// cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js "> </ script> <script src =" // cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2. min.js "> </ script> <script> (function () {// initialize select2 dropdown $ ('# test'). select2 ({data: dropdownData (), placeholder: 'search', multiple: true, / / creazione di query con funzionalità di impaginazione. query: function (data) {var pageSize, dataset, that = this; pageSize = 20; // Numero dei carichi di opzione alla volta risultati = []; if (data.term && data.term! == '') {// HEADS UP; per la funzione _filter utilizzo il carattere di sottolineatura (attualmente lo-dash) qui 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,}); },}); }) (); // Funzione per recuperare i dati demo per la funzione del menu a discesa get_random_word (str) {return str .split (''). Sort (function () {return 0.5 - Math.random ();}). Join ('') ; } // Per scopi di test stiamo creando una vasta gamma di dati dimostrativi (elementi 20 000) dropdownData () {return _.map (_. Range (1, 20000), function (i) {return {id: i , testo: get_random_word ('La rapida volpe marrone salta su un cane pigro') + '' + i,};}); } </ script> </ body> </ html>

Schermata di output

Gestire i dati di grandi dimensioni nel menu a discesa Select2
sommario

Quando l'utente invierà questo modulo, il sistema otterrà i dati selezionati in un array.


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as expert as a PHP developer. He has also expert in database design, server maintenance and their security. He has achieved this goal only in the short span of 2yrs and still looking forward to achieve 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 *