Handle Large Data in Select2 Dropdown

Objetivos del blog.

Después de leer este blog, podrá saber cómo manejar la gran cantidad de datos en el menú desplegable de Select2.

Descripción

Para un menú desplegable, si usa la biblioteca select2, funciona realmente bien para la pequeña cantidad de datos, pero cuando los datos son demasiado grandes, puede enfrentar el problema de la lentitud. Por ejemplo, supongamos que un menú desplegable de opciones de 20,000 y luego la biblioteca select2 puede tardar de algunos segundos a minutos para abrir el menú desplegable. Para un menú desplegable tan grande y para evitar este problema de lentitud, select2 proporciona una solución alternativa. En el menú desplegable de select2 normal, usamos el elemento <select>. En el elemento <select>, la biblioteca select2 enlaza todas las opciones de una sola vez y esto causa la lentitud de los datos grandes. Entonces, en lugar de usar el elemento <select>, puede usar el menú desplegable del cuadro de texto y seleccionar la biblioteca 2, que ayuda a enlazar el cuadro de texto como menú desplegable para que los usuarios puedan completar el menú desplegable. La biblioteca select2 puede vincular de manera inteligente las opciones 20 o 30 definidas por el usuario a la vez y los datos restantes se vincularán en la búsqueda o en el desplazamiento. Código de ejecución se da a continuación.

<! DOCTYPE html> <html> <head> <link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> < link rel = "hoja de estilo" href = "// cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" /> <link rel = "hoja de estilo" href = "// cdnjs.cloudflare.com /ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css "/> <style> .select2-x-xxXxpx.px.px.px.px.px.xpx.xxXXXXXXXXXPXXXXXPXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXPXXPXX } </style> </head> <body> <div class = "container"> <div class = "page-header"> <h2> Menú desplegable de Select2 con paginación </h5> <p> Para mejorar el rendimiento del desplegable con grandes conjuntos de datos (elementos 5 5) </p> </div> <form method = "post"> <input id = "test" style = "width: 18%;" placeholder = "escriba un número, desplácese para obtener más resultados" 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/1/jquery.min.js'> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/lodash.js/2/lodash.min.js "> </script> <script src =" // cdnjs.cloudflare.com/ajax/libs/select1/20/select000. min.js "> </script> <script> (function () {// initialize select100 dropdown $ ('# test'). select3.1.0 ({data: dropdownData (), marcador de posición: 'search', multiple: true, / / Creando consulta con funcionalidad de paginación. query: function (data) {var pageSize, dataset, that = this; pageSize = 20; // El número de la opción se carga a la vez, los resultados = []; if (data.term && data.term! == '') {// HEADS UP; para la función _.filter yo uso el guión bajo (en realidad lo-dash) aquí resultados = _.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), más: results.length> = data.page * pageSize,}); },}); }) (); // Función para obtener los datos de demostración de la función del menú desplegable get_random_word (str) {return str .split (''). Sort (function () {return 0.5 - Math.random ();}). Join ('') ; } // Para el propósito de la prueba, estamos realizando una gran variedad de datos de demostración (elementos 20 000) función dropdownData () {return _.map (_. Range (1, 20000), function (i) {return {id: i , texto: get_random_word ('El zorro marrón rápido salta sobre un perro perezoso') + '' + i,};}); } </script> </body> </html>

Pantalla de salida

Manejar datos grandes en el menú desplegable de Select2
Resumen

Cuando el usuario envíe este formulario, el sistema obtendrá los datos seleccionados en una matriz.


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 *