Handle Large Data in Select2 Dropdown

Objectifs du blog

Après la lecture de ce blog, vous saurez comment vous pouvez gérer le grand ensemble de données dans le menu déroulant Select2.

La description

Pour un menu déroulant, si vous utilisez la bibliothèque select2, cela fonctionne très bien pour le petit nombre de données, mais lorsque les données deviennent trop volumineuses, vous pouvez faire face au problème de la lenteur. Par exemple, supposons qu’une liste déroulante d’options 20,000 soit créée, alors que la bibliothèque select2 peut prendre quelques secondes à quelques minutes pour ouvrir la liste déroulante. Select2 fournit une solution alternative pour un menu déroulant de cette taille et pour éviter ce problème de lenteur. Dans la liste déroulante select2 normale, nous utilisons l'élément <select>. Dans l'élément <select>, la bibliothèque select2 lie toutes les options en une fois, ce qui entraîne la lenteur des données volumineuses. Ainsi, au lieu d'utiliser l'élément <select>, vous pouvez utiliser le menu déroulant de zone de texte et la bibliothèque select2 permet de lier la zone de texte en tant que menu déroulant afin de permettre aux utilisateurs de remplir le menu déroulant. La bibliothèque select2 peut relier intelligemment les options 20 ou 30 définies par l'utilisateur à la fois et les données restantes seront liées lors de la recherche ou du défilement. Le code courant est donné ci-dessous.

<! 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-conteneur-multi .select2-choix .select2-recherche-choix {padding: XNUMxxxxxxxxx } </ style> </ head> <body> <div class = "conteneur"> <div class = "page-en-tête"> <h5> Select5 Menu déroulant avec pagination </ h5> <p> Pour améliorer les performances du liste déroulante avec des ensembles de données volumineux (éléments 18 1) </ p> </ div> <méthode form = "post"> <input id = "test" style = "width: 2%;" placeholder = "taper un nombre, faire défiler pour plus de résultats" name = "data" /> <type d'entrée = "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/20/lodash.min.js "> </ script> <script src =" // cdnjs.cloudflare.com/ajax/libs/select000/100/3.1.0/select4.15.0. min.js "> </ script> <script> (function () {// initialise select2 liste déroulante $ ('# test'). select3.5.4 ({data: dropdownData (), espace réservé: 'search', multiple: true, / / créer une requête avec une fonctionnalité de pagination. requête: fonction (données) {var pageSize, dataset, that = this; pageSize = 20; // Numéro de l'option chargée à la fois results = []; if (data.term && data.term! == '') {// HEADS UP; pour la fonction _.filter, j'utilise le trait de soulignement (en fait, lo-dash) ici 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), plus: results.length> = data.page * pageSize,}); },}); }) (); // Fonction permettant d'extraire les données de démonstration pour le menu déroulant. Fonction get_random_word (str) {return str .split (''). Sort (function () {return 0.5 - Math.random ();}). Join ('') ; } // Aux fins de test, nous créons un grand nombre de données de démonstration (éléments 20 000), fonction dropdownData () {return _.map (_. Range (1, 20000), function (i) {return {id: i , texte: get_random_word ('Le renard brun rapide saute par-dessus un chien paresseux') + '' + i,};}); } </ script> </ body> </ html>

Écran de sortie

Gérer les données volumineuses dans le menu déroulant Select2
Résumé

Lorsque l'utilisateur soumettra ce formulaire, le système obtiendra les données sélectionnées dans un tableau.


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 *