Quelles sont les différences entre Chosen et Select2?

157

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?

Paul
la source
11
Votre expérience avec les pull requests est probablement un bon indice sur les raisons pour lesquelles Select2 a commencé comme une réécriture, pas comme un fork. J'ai également remarqué que Select2 a une meilleure documentation (ou au moins plus longue).
Paul
1
Quand cela compte ou par souci de différence Chosen est MIT tandis que Select2 est sous licence Apache.
EGL 2-101 du
2
Pour être précis, Select2 est disponible sous licence Apache ou GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul

Réponses:

92

À 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.
Monsieur 14
la source
2
fwiw quelqu'un a travaillé sur une fonctionnalité "ajouter des résultats à la volée" pour Chosen: github.com/shezarkhani/chosen/tree/create_new_options J'utilise une sorte d'adaptation de celui-ci dans l'add-on ExpressionEngine MX Select Plus (c'est ainsi Je suis arrivé ici car il existe maintenant un add-on concurrent utilisant Select2).
notacouch
Il convient de noter cependant que Select2 n'a pas de solution de secours lorsque Javascript est désactivé, car les options sont renseignées via AJAX.
Deathlock
10
Rien de ce qui extrait des données via AJAX ne fonctionnera sans Javascript. Select2 fonctionne bien avec des valeurs pré-remplies et n'a pas besoin d'utiliser AJAX.
zachzurn
@notacouch Qu'est-ce que «Matrix Support», «Low Variables Support» et «SafeCracker support»? Ces concepts sont-ils spécifiques à ExpressionEngine?
John Zabroski
@JohnZabroski Oui, ce sont des add-ons EE 2.x commerciaux (iirc SafeCracker peut avoir été intégré).
notacouch
40

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.

Peter Lyons
la source
4
À mon avis, plus de problèmes signifie que plus de gens se soucient et utilisent. Et une plus grande communauté a tendance à produire un meilleur code (cela ne s'applique pas nécessairement à choisi). AngularJS: 397 numéros, 49 demandes d'extraction; joyent / node: 476 numéros, 98 demandes d'extraction. Je me demande quels seraient les chiffres pour Firefox, Linux Kernel ou gcc.
Paul
Ouais c'est juste une heuristique. En théorie, un widget de sélection automatique devrait être de plusieurs ordres de grandeur de complexité inférieure à quelque chose comme joyent / node. Ces choses se révèlent être très personnalisées, donc j'ai l'impression que les gens déposent des demandes d'extraction, qui sont ignorées, puis ils vont maintenir un fork séparé ou réécrire. YMMV.
Peter Lyons
Juste une note si vos plans doivent aller avec une approche de personnalisation: Chosen a une quantité beaucoup plus petite de code (environ 1/3), mais est écrit en CoffeeScript et SASS (avant d'être compilé en JS / CSS). Si vous connaissez déjà CoffeeScript, votre choix est simple: Chosen sera plus facile à comprendre et à personnaliser.
Tim Dorr
@Peter Lyons Voici quelques métriques assez bizarres utilisées pour tirer votre conclusion (non pas que je ne sois pas d'accord avec votre conclusion). Jetez un œil au nombre de contributeurs (Select2 = 239 v. Chosen = 73), mais cela peut aussi être trompeur, plus n'est pas toujours mieux. L'impulsion et les graphiques de chaque projet GitHub affichent l'historique et la fréquence des validations ainsi qu'une tonne d'autres statistiques utiles pour prendre une décision éclairée sur le projet qui peut être «maintenu» ou «en cours de développement actif».
cfx
FWIW, Chosen a eu beaucoup de mises à jour au cours des deux dernières années.
Charles Wood
21

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.

Daniel Sokolowski
la source
2
selectize.jsutilise moins . Est-ce moins qu'une impasse technologique Sass?
Chris Wesseling
Non, c'est dans le même domaine mais sur les trois selectize.js a eu le moins besoin de peaufiner le projet.
Daniel Sokolowski
selectize a des problèmes visuels sur Firefox 28.
MEM
@MEM pourriez-vous être plus précis.
Daniel Sokolowski
Dans Firefox 28 (Mac OS X), vous remarquerez une «marge ou remplissage ou bordure» grise supplémentaire sous chaque champ de saisie. Ce n'est pas un effet, je suppose. Ce doit être une incohérence visuelle. C'est clair une fois que nous les regardons sur FF, et le même problème ne se produit pas sur Chrome par exemple.
MEM
18

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

contributions de select2.js contributions choisies.js

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

Adrien Be
la source
Select2 doit prendre en charge les appareils mobiles de la même manière que les autres. Nous essayons de nous assurer que cela fonctionne aussi bien, avec toutes les fonctionnalités prévues, sur tous les appareils.
Kevin Brown
1
Je pense que la principale raison pour laquelle select2 est plus actif est qu'il travaille sur select2 4.x, qui est une réécriture majeure. Honnêtement, je ne comprends pas pourquoi les gens mettent autant l'accent sur les contributions. J'aurais aimé que GitHub ait un diagramme de flux cumulatif qui suivrait des choses importantes comme la couverture du code et les cas de test, ainsi que le temps de réponse moyen pour les problèmes! (J'utilise select2, btw, mon point est juste une bête noire générale sur les gens qui se concentrent sur les contributions et l'ingénierie sociale qui est encouragée par les graphiques ci-dessus.)
John Zabroski
13

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.

zipp
la source
Juste pour noter Select2 est également sous licence MIT. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Cette réponse est vraiment ancienne et pourrait ne plus s'appliquer. Je le modifierai quand j'aurai le temps.
zipp
9

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

entrez la description de l'image ici

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

Pēteris Caune
la source
Je suis confronté au même problème avec Chosen.
devXen
1
Vous pouvez faire .chosen-drop { z-index: 999999 !important;}pour résoudre ce problème avec choisi
Alireza Fattahi
6

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.

reggaemahn
la source
2
Oui Chosen semble rechercher des mots, c'est-à-dire que la saisie Kingdomsur leur page d'exemple retournera, United Kingdomce qui semble être une manière très logique de le faire et vous pouvez également spécifier $("#element").chosen({ search_contains: true });.
Daniel Sokolowski
2
Je suis d'accord avec vous et c'est souvent le cas ie. vous cherchiez des mots. Mais dans de nombreux cas où vous avez des éléments entre parenthèses comme «xyz (abc)» si vous tapez «abc», vous recherchez également «xyz» qui ne sera pas renvoyé. Je suppose que cela se résume au scénario dans lequel vous l'utilisez. Dans mon application Web, j'ai utilisé les deux là où ils étaient pertinents. J'aime un peu plus choisi uniquement en raison de sa vitesse de rendu supérieure dans IE.
reggaemahn
5

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.

danvk
la source
@RezaRahmati merci pour cela. Avez-vous également essayé un iPhone par hasard? Harvesthq.github.io/chosen/#faqs indique que "Chosen est désactivé sur les appareils mobiles iPhone, iPod Touch et Android". plus sur github.com/harvesthq/chosen/pull/1388
Adrien Be
@adrienbe oui je l'ai testé sur Samsung Galaxy Tab et iPad
Reza
@RezaRahmati quel a été le résultat?
Adrien Be
@AdrienBe Cela fonctionne, je l'ai utilisé dans medicfa.com/Users/Create?reloadList=false ouvrez-le avec la tablette et vérifiez le résultat
Reza
5

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.

dev101
la source
Pour activer correctement la recherche dans Chosen, ajoutez search_contains: trueà vos options. Voir récoltehq.github.io
Sicco
1

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é.

John Zabroski
la source
0

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.

Yash
la source