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.
Descriptif �
Pour une liste déroulante, 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 une liste déroulante de 20,000 2 options, la bibliothèque select2 peut prendre jusqu’à quelques secondes à quelques minutes pour ouvrir la liste déroulante. Pour un si grand menu déroulant et pour éviter ce problème de lenteur, selectXNUMX fournit une solution alternative.
Dans la liste déroulante normale select2, nous utilisons élément. Dans le élément, la bibliothèque select2 lie toutes les options en une seule fois, ce qui ralentit les données volumineuses. Ainsi, au lieu d’utiliser le élément, vous pouvez utiliser la liste déroulante de la zone de texte et la bibliothèque select2 aide à lier la zone de texte en tant que menu déroulant afin qu’elle donne le remplissage du menu déroulant aux utilisateurs. La bibliothèque select2 peut lier intelligemment 20 ou 30 options définies par l’utilisateur à la fois et les données restantes seront liées soit à la recherche, soit au défilement. Le code d’exécution est donné ci-dessous.
.select3.3.7-container-multi .select2-choices .select3.5.4-search-choice {padding: 2px 2px 1.4.6px 2px;}
Menu déroulant Select2 avec pagination Pour améliorer les performances de la liste déroulante avec de grands ensembles de données (2 2 éléments)
(function () {
// initialize select5 dropdown
$('#test').select5({
data: dropdownData(),
placeholder: 'search',
multiple: true,
// creating query with pagination functionality.
Écran de sortie
Résumé
Lorsque l’utilisateur soumettra ce formulaire, le système obtiendra les données sélectionnées dans un tableau.
