Quelles sont les différences entre Chosen et Select2?

Chosen et Select2 sont les deux bibliothèques les plus populaires pour étendre les sélections.

Les deux semblent être activement maintenus, Chosen est plus ancien et prend en charge à la fois jQuery et Prototype.

Select2 est uniquement jQuery, sa documentation indique que Select2 est inspiré de Chosen, mais ne détaille aucune des améliorations apportées (le cas échéant) ou d'autres raisons de la réécriture.

Deux bibliothèques ont à peu près le même ensemble de fonctionnalités, la seule comparaison que j'ai trouvée est une page de test jsperf quelque peu peu concluante.

L'une de ces bibliothèques présente-t-elle des avantages par rapport à l'autre?

À partir de Select2 3.3.1, voici ce qui est documenté dans son fichier README.md

Qu'est-ce que le support Select2 qui n'a pas été choisi?

• Travailler avec de grands ensembles de données: Chosen nécessite que l'ensemble de données soit chargé en tant que optionbalises dans le DOM, ce qui le limite à travailler avec des ensembles de données de petite taille. Select2 utilise une fonction pour trouver des résultats à la volée, ce qui lui permet de charger partiellement les résultats.
• Pagination des résultats: comme Select2 fonctionne avec de grands ensembles de données et ne charge qu'une petite quantité de résultats correspondants à la fois, il doit prendre en charge la pagination. Select2 appellera la fonction de recherche lorsque l'utilisateur fait défiler vers le bas de l'ensemble de résultats actuellement chargé permettant le «défilement infini» des résultats.
• Balisage personnalisé pour les résultats: choisi ne prend en charge que le rendu des résultats de texte car c'est le seul balisage pris en charge par les optionbalises. Select2 fournit un point d'extension qui peut être utilisé pour produire tout type de balisage pour représenter les résultats.
• Possibilité d'ajouter des résultats à la volée: Select2 offre la possibilité d'ajouter des résultats à partir du terme de recherche saisi par l'utilisateur, ce qui lui permet d'être utilisé pour le marquage.

IMHO Chosen est "maintenu" mais pas "activement maintenu". 341 problèmes et 51 pull requests pour Chosen. Select2 a 128 problèmes et 25 pull requests. Je pense que le modèle pour ceux-ci est fondamentalement

• choisissez celui qui vous plaît le plus en apparence
• utilisez-le dans une ou deux applications
• se heurter aux problèmes ou aux limitations de personnalisation
• essayez peut-être de travailler avec la communauté via des problèmes et des pull requests
• éventuellement en avoir marre et simplement construire le vôtre en utilisant ce que vous avez appris dans ce processus

Quel que soit celui que vous choisissez, si votre cas d'utilisation est exactement dans leur zone idéale, l'un ou l'autre fonctionnera. Sinon, vous devrez éventuellement écrire les vôtres ou les personnaliser fortement. Dans les deux cas, le choix de celui qui est spécifiquement n'est pas si important. Je suppose que je suis du côté de @Andy Ray et @paul ici que Select2 est probablement le meilleur choix initial.

Une autre différence qui mérite d'être mentionnée est qu'elle Chosenest développée dans Sasset CoffeeScriptalors que Select2c'est clair CSSet JS. C'est mon option personnelle Sasset ce CoffeeScriptsont des couches de complexité inutiles qui rendent le débogage difficile.

Après avoir essayé les deux, j'ai décidé de n'utiliser ni l'un ni l'autre - essayer d'obtenir la Select2fonctionnalité de création d'élément s'avère être une affaire très poilue car vous ne pouvez tout simplement pas le faire une fois attaché à des <select>éléments - cela ne me semblait tout simplement pas bien pensé aux cerceaux que j'aurais sauter à travers.

J'ai décidé d'utiliser selectize.js qui ajoute simplement le nouvel <option>...</option>élément au DOM du formulaire - et c'est sain. Il utilise également LESS- mais je contournerais cela et adapter simplement le compilé CSSdirectement dans votre projet.

choisi.js contre select2.js

• Licence MIT pour les deux
• Dépendances:
  • Select2: jQuery
  • Choisi: à confirmer
• Prise en charge du navigateur de bureau:
  • Sélectionnez2: IE8 +
  • Choisi: IE8 +
• Prise en charge de l'appareil:
  • Select2: pas clair
  • Choisi: désactivé sur les appareils mobiles iPhone, iPod Touch et Android
• Poids (minifié):
  • Sélectionnez2: 57KB
  • Choisi: 27KB
• Utilisation: Select2 prend en charge une interface utilisateur plus «sophistiquée» (voir «modèles»)
• Les deux dépôts de code sont disponibles sur Github
  • Select2: contributions: très actives
  • Choisi: contributions: environ 3x moins que Select2

ps. J'essaierai de mettre à jour cette réponse lorsque j'en saurai plus sur les points manquants

Tout d'abord, laissez-moi vous dire que Chosen et Select2 sont deux excellents plugins et c'est mon expérience personnelle à propos de Chosen. Tout ce qu'ils disent est vrai concernant Chosen.

Le problème signalé par Pēteris Caune avec le selectest de 2 ans et il n'y a toujours pas de solution officielle. Il n'y a tout simplement pas de bonne documentation pour l'API. Il a été souligné (montre numéro 671) à plusieurs reprises mais il n'y a toujours rien. Il leur a fallu près de 2 ans pour résoudre ce problème où choisi ne fonctionnerait fondamentalement pas si vous cachaiez le div avec overflow:hiddenavant de le montrer (et vous devez utiliser une witdh:X%option que vous ne sauriez pratiquement jamais si vous ne cherchez pas le problème).

Je dirais que le problème principal est la vitesse de correction, comme l'a dit DelvarWorld dans le numéro 92:

Ma demande de tirage résout ce problème, mais comme mon autre et beaucoup de ceux choisis, ils sont ignorés. Ce projet a trop de contributeurs avec une base de code trop petite.

J'ai d'abord choisi Chosen pour sa licence MIT mais j'avais tous ces problèmes (coupe de liste déroulante, ne pas trouver l'API, recherche pendant des heures pour le débordement caché), j'ai donc décidé de passer à select2 car il a une meilleure documentation, pas de bug de coupe de liste déroulante et des correctifs plus rapides.

Une fonctionnalité qui fonctionne dans Select2 mais ne fonctionne pas dans Chosen, est selectl'élément intérieur qui a overflow: hiddenou overflow: auto.

Problème correspondant pour Chosen: https://github.com/harvesthq/chosen/issues/86

Quelques différences que j'ai trouvées en travaillant avec ces deux plugins:

• Avec select2, vous pouvez effectuer une recherche à n'importe quel endroit de l'option. Par exemple, si vous avez une option appelée ABCDEFG et que vous tapez CDE, vous obtiendrez cette option dans les résultats de la recherche, mais avec choisi, vous devez taper AB .. et ainsi de suite pour obtenir les résultats.

• J'ai constaté qu'avec des ensembles de données plus volumineux, choisi semble être plus rapide que select2, en particulier dans IE.

Select2 prend en charge le mobile, tandis que Chosen se désactive spécifiquement sur les iPod, les iPhones et les mobiles Android. Si vous souhaitez utiliser des boîtes de sélection "étendues" sur mobile, cela facilite votre choix.

Mon expérience avec Select2 a été excellente sur le bureau, mais sur les appareils mobiles tactiles très variée, avec certaines bizarreries toujours présentes. Par exemple, sur xperia st15i avec ics et le menu déroulant du navigateur de stock se fermait toujours à cause du vol du clavier. Le seul moyen de le rouvrir est de toucher le menu des dizaines de fois, de maintenir le doigt pendant une seconde et d'autres magie vaudou. Ou pour commencer à taper pendant que la liste déroulante est fermée, et combien d'utilisateurs le comprendront?

Selectize.js semble être beaucoup plus fluide que Select2, mais il a également des problèmes sur son propre mobile, par exemple lorsque la valeur est sélectionnée ou saisie, il déplace la page complètement vers la gauche pour une raison quelconque. De plus, sur les anciens appareils Android 2.x qui ne prennent pas en charge le débordement, il est impossible de sélectionner au-delà des quelques options principales, car le clavier ne s'affiche pas. :(

Il faut encore tester Chosen et ce n'est peut-être pas une si mauvaise idée d'être désactivé pour les appareils mobiles après tout, mais à la fin, le bon vieux menu déroulant fonctionne toujours et partout.

Mise à jour: maintenant, j'ai également testé Chosen, et c'est mieux dans un domaine: cela ne fonctionne pas sur mobile par défaut (super!), Mais il a des problèmes de filtrage des mots. Par exemple, ne recherche pas au milieu des mots, et si vous utilisez & nbsp hack pour les aligments, il ignorera également les options complètes. Retour à la planche à dessin.

Pourquoi j'ai choisi select2 sur Chosen

La caractéristique clé de select2, qu'aucun autre contrôle n'a auto-magiquement, est "Effacer toutes" les sélections avec le 'x' dans la main droite du contrôle. C'est une fonctionnalité qui tue pour mon application. Je ne sais pas pourquoi d'autres bibliothèques d'amélioration de balises sélectionnées n'ont pas cette fonctionnalité.

Select2 prend en charge AJAX Chosen ne

Select 2 est un peu plus lourd que celui choisi.

Je suis passé à Select2 car aucun support officiel pour les opérations ajax.