Expliquez Chosen et Select2 avec des exemples

Nous pouvons utiliser deux plugins jQuery pour styliser la zone de sélection, à savoir Select2 et Chosen. Les plugins Select2 et Chosen améliorent l'apparence des cases sélectionnées et améliorent le comportement des cases, les rendant ainsi conviviales. De plus, les deux plugins fonctionnent avec plusieurs cases sélectionnées ainsi qu'avec une seule case sélectionnée.

Choisissez

Plugin JavaScript pour créer des zones de sélection conviviales. Chosen est disponible dans les versions prototype et JQuery.

Fonctionnalités sélectionnées

Convivial

Vos utilisateurs n’ont pas besoin de parcourir une multitude de possibilités ; ils peuvent simplement commencer par le nom de ce qu’ils recherchent. Pour sélectionner une alternative, il suffit d'appuyer sur "Entrée" ou de cliquer sur la souris ; les entrées sans correspondance seront supprimées de l'écran.

Amélioration progressive

Étant donné que Chosen remplace le champ HTML Select par défaut, vous n'avez plus besoin de prendre d'autres mesures pour le faire fonctionner dans les navigateurs qui ne prennent pas en charge JavaScript. Le backend n'utilise pas non plus d'événements pour gérer les données.

Installation facile

Incluez simplement les fichiers sélectionnés dans votre application et ouvrez le plugin. Les groupes de sélection, les états sélectionnés, les fonctionnalités multiples et l'ordre des onglets du navigateur sont automatiquement respectés par les sélections.

Choisissez 2

Select2 fournit aux utilisateurs une zone de sélection personnalisable qui peut être utilisée pour les recherches, les ensembles de données distants, les marqueurs, le défilement infini et de nombreuses autres propriétés utiles.

Les fonctionnalités de Select2 sont

En plus de prendre en charge la recherche, le balisage, les ensembles de données distants, le défilement infini et de nombreuses autres options, il fournit également aux utilisateurs des zones de sélection personnalisables.

Environnement RTL

Il prend en charge l'environnement RTL et dispose d'une fonctionnalité de recherche intégrée dans plus de 40 langues.

Ajax

Vous pouvez utiliser Ajax pour rechercher rapidement une longue liste d'éléments.

Créez du CSS entièrement personnalisable à l'aide des thèmes Sass et Bootstrap 3 en option.

Bibliothèque Javascript de choix

Pour utiliser le plugin sélectionné dans JQuery, nous devons ajouter quelques bibliothèques comme indiqué ci-dessous -

• chosen.jquery.min.js

• Sélectionnez .min.css

Aussi pour activer le plugin sur la box sélectionnée nous devons ajouter le code suivant -

$(“.chosen-select”).chosen()

Le code écrit ci-dessus est un script en JQuery.

Bibliothèque JavaScript Select2

Pour utiliser le plugin select2 dans jQuery, nous devons ajouter quelques bibliothèques comme indiqué ci-dessous -

• select2.min.js

• select2.min.css

Aussi pour activer le plugin sur la box sélectionnée nous devons ajouter le code suivant -

$(“.chosen-select”).select2()

Le code écrit ci-dessus est un script en JQuery.

Nous avons compris les bases de selected et select2, venons-en maintenant à l'essentiel, c'est-à-dire que dans l'essentiel nous observerons la différence entre eux.

Différence entre Chosen et Select2

Les deux bibliothèques les plus couramment utilisées pour améliorer les zones de sélection sont Choose et select2. Chosen est plus ancien que Select2 et prend en charge jQuery et Prototype. Les deux sont en cours de mise à jour. Select2 est inspiré de Chosen et ne prend en charge que jQuery.

Voyons la différence entre selected et select2 -

Charger les données

Lors du chargement de données à l'aide de la sélection, l'ensemble de données complet doit être chargé en tant que balise d'option dans le DOM, la gestion de petits ensembles de données est donc limitée. Select2, quant à lui, utilise le concept de fonctions pour rechercher des résultats de manière dynamique, permettant à la méthode select2 de charger partiellement les résultats, éliminant ainsi les défauts de selected .

Exigences de pagination

Comme nous l'avons vu au point précédent, l'ensemble des données est chargé immédiatement par le sélecteur, ce qui signifie qu'il n'est pas nécessaire de diviser les données en parties, le concept de pagination est donc inutile. La fonction Select2, quant à elle, gère l'ensemble de données complet et charge partiellement les résultats requis et prend en charge le concept de pagination. Lorsque l'utilisateur fait défiler vers le bas des données actuelles, il appelle la fonction de recherche pour fournir plus de données en la chargeant.

Types de support de balises

Le seul support de balisage fourni par la balise options est le texte rendu pris en charge par la sélection, Select2, en revanche, fournit un point d'extension qui peut être utilisé pour créer divers balisages pour représenter les résultats.

Ajouter des résultats

Pour ajouter des résultats, Choosen et select2 ont deux options, statique ou dynamique, mais Choose ne peut pas ajouter de résultats de manière dynamique, tandis que select2 fait exactement le contraire et permet d'ajouter dynamiquement des résultats à l'aide de balises.

Développement

Sass et CoffeeScript ont été utilisés pour développer select, tandis que du JavaScript pur et du CSS ont été utilisés pour développer select2.

Les différences indiquées ci-dessus sont les principales différences entre Select et Select, il existe également quelques différences mineures comme la taille de Select est de 27 Ko tandis que la taille de Select 2 est plus grande à 57 Ko.

REMARQUE - Il a été constaté que Saas et CoffeeScript rendent les choix de débogage plus difficiles.

Select2 prend ouvertement en charge les appareils mobiles, tandis que Chosen se désactive intentionnellement sur certains appareils. Par conséquent, si vous souhaitez utiliser la « zone de sélection étendue » sur les appareils mobiles, il est recommandé d'utiliser Select2.

Conclusion

Dans cet article, nous avons appris qu'il existe deux plugins JQuery qui peuvent être utilisés pour styliser les boîtes de sélection, à savoir Select2 et Chosen. Les plugins Select2 et Chosen améliorent l'apparence des cases sélectionnées et améliorent le comportement des cases, les rendant ainsi conviviales. Il existe de nombreuses différences entre Select2 et Choose, notamment le processus de chargement des données, la nécessité ou non d'une pagination, la possibilité d'ajouter dynamiquement les résultats et les méthodes de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!