Quelles sont les différences entre Chosen et Select2?
Choisi et Select2 sont les deux bibliothèques les plus populaires pour l'extension de sélections.
Les deux semblent être activement maintenus, Chosen est plus âgé et prend en charge jQuery et Prototype.
Select2 est uniquement jQuery, sa documentation indique que Select2 est inspiré de Chosen, mais ne détaille aucune amélioration apportée (le cas échéant) ni aucune autre raison de la réécriture.
Deux bibliothèques ont à peu près les mêmes fonctionnalités, la seule comparaison que j’ai trouvée est une page de test jsperf peu concluante.
Est-ce que certaines de ces bibliothèques ont des avantages par rapport aux autres?
À partir de Select2 3.3.1, voici ce qui est documenté dans son fichier README.md.
Qu'est-ce que le support Select2 qui a choisi ne le fait pas?
- Utilisation de jeux de données volumineux: Pour que le jeu de données soit complet, il faut que tout le jeu de données soit chargé sous la forme de balises
optiondans le DOM, ce qui le limite à l'utilisation de jeux de données de petite taille. Select2 utilise une fonction pour rechercher des résultats à la volée, ce qui lui permet de charger partiellement les résultats.- Pagination des résultats: étant donné que Select2 fonctionne avec de grands ensembles de données et ne charge qu'un petit nombre de résultats correspondants, il doit prendre en charge la pagination. Select2 appellera la fonction de recherche lorsque l'utilisateur fera défiler l'écran vers le bas du jeu de résultats actuellement chargé, permettant ainsi un "défilement infini" des résultats.
- Balisage personnalisé pour les résultats: L'élément choisi ne prend en charge que le rendu des résultats de texte car il s'agit du seul balisage pris en charge par les balises
option. Select2 fournit un point d’extension qui peut être utilisé pour produire tout type de balisage représentant les résultats.- Possibilité d’ajouter des résultats à la volée: Select2 permet 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 choisi est "maintenu" mais pas "activement maintenu". 341 questions et 51 demandes d'attraction pour Elu. Select2 a 128 problèmes et 25 demandes d'extraction. Je pense que le modèle pour ceux-ci est fondamentalement
- choisissez celui qui vous paraît le plus attrayant en apparence
- l'utiliser dans une application ou deux
- heurter des problèmes de personnalisation ou des limitations
- peut-être essayer de travailler avec la communauté via des problèmes et des demandes d'extraction
- finalement en avoir marre et juste construire votre propre en utilisant ce que vous avez appris dans ce processus
Quel que soit votre choix, si votre cas d'utilisation se trouve exactement à leur place, l'un ou l'autre fonctionnera. Sinon, vous devrez éventuellement écrire le vôtre ou le personnaliser fortement. Dans les deux cas, le choix de celui-ci n'est pas si important. Je suppose que je vais me ranger avec @Andy Ray et @paul ici pour dire que Select2 est probablement le meilleur choix initial.
Une autre différence à noter est que Chosen est développé dans Sass et CoffeeScript alors que Select2 Est simple CSS et JS . C'est mon option personnelle que Sass et CoffeeScript sont des couches inutiles de complexité qui rendent le débogage difficile.
Après avoir essayé les deux, j’ai décidé d’utiliser ni l’un ni l’autre - essayer d’obtenir la fonctionnalité de création d’élément Select2 S’avère très compliquée, car vous ne pouvez tout simplement pas le faire lorsque vous y êtes attaché à des éléments <select>. Je ne me sentais pas bien pensé aux arceaux que je devais franchir.
Je me suis décidé à utiliser selectize.js , qui ajoute simplement le nouvel élément <option>...</option> Au DOM de la fiche - et cela est sain. Il utilise également LESS - mais je le contournerais et adapterais le CSS compilé directement dans votre projet.
choisi.js vs select2.js
- Licence MIT pour les deux
- Dépendances:
- Select2: jQuery
- Choisi: à confirmer
- Prise en charge du navigateur de bureau:
- Select2: IE8 +
- Choisi: IE8 +
- Prise en charge de l'appareil:
- Select2: pas clair
- Choisi: désactivé sur iPhone, iPod Touch, & Android appareils mobiles
- Poids (minifié):
- Sélectionnez2: 57KB
- Choisi: 27Ko
- Utilisation: Select2 prend en charge une interface utilisateur plus "élégante" (voir "modèles")
- Les deux dépôts de code sont disponibles sur Github
- Select2: contributions: très actif
- Choisi: contributions: environ 3 fois moins que Select2
ps. Je vais essayer de mettre à jour cette réponse quand j'en saurai plus sur les points manquants
Tout d’abord, laissez-moi vous dire que Chosen et Select2 sont deux très bons plugins et c’est mon expérience personnelle à propos de Chosen. Tout ce qu'ils disent est vrai concernant Elu.
Le numéro indiqué par Pēteris Caune avec le select a 2 ans et il n’existe toujours pas de solution officielle. Il n'y a tout simplement pas de bonne documentation pour l'API. Cela a été souligné à plusieurs reprises (numéro 671), mais il n’ya toujours rien. Il leur a fallu presque deux ans pour résoudre ce problème problème où le choix ne fonctionnerait pas si vous masquiez la div avec overflow:hidden avant de le montrer (et vous devez utiliser un witdh:X% option que vous ne sauriez jamais si vous ne cherchiez pas le problème).
Je dirais que le problème principal est la vitesse de réparation, comme disait DelvarWorld dans le numéro 92:
Ma demande d'extraction corrige ce problème, mais comme mon autre et de nombreuses personnes choisies, elles sont ignorées. Ce projet a trop de contributeurs avec une base de code trop petite.
J'ai d'abord choisi Choisi pour sa licence MIT), mais j'avais tous ces problèmes a une meilleure documentation, aucun bug de menu déroulant et des corrections plus rapides.
Une fonctionnalité qui fonctionne dans Select2 mais ne fonctionne pas dans Choisi, est select à l'intérieur de l'élément qui a overflow: hidden ou overflow: auto.
Problème correspondant à choisi: 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 selected, vous devrez taper AB .. et ainsi de suite pour obtenir les résultats.
J'ai constaté qu'avec de plus grands ensembles de données, le choix semble être plus rapide que select2, en particulier dans IE.
Select2 prend en charge mobile, tandis que Choisi se désactive spécifiquement sur iPod, iPhone et mobile Android. Si vous souhaitez utiliser des boîtes de sélection "étendues" sur votre mobile, votre choix est facilité.
Mon expérience avec Select2 était excellente sur le bureau, mais sur les appareils tactiles tactiles très variés, avec quelques bizarreries toujours présentes. Par exemple, sur le xperia st15i avec ics et le menu déroulant du navigateur stock se fermait toujours tout seul à cause du vol du clavier. La seule façon de le rouvrir est de toucher le menu des dizaines de fois, de tenir le doigt pendant une seconde et une autre 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 entrée, la page est déplacée complètement vers la gauche pour une raison quelconque. En outre, sur les anciens Android 2.x périphériques qui ne prennent pas en charge le débordement, il est impossible de sélectionner au-delà des quelques options supérieures, car le clavier ne s'affiche pas. :(
Reste à tester Choisi et ce n’est peut-être pas une si mauvaise idée d’être désactivé pour les appareils mobiles après tout, mais au final, un bon vieux menu déroulant fonctionne toujours et partout.
Mise à jour: maintenant, j'ai aussi testé Chosen, et c'est mieux dans un domaine: cela ne fonctionne pas sur mobile par défaut (génial!), Mais il y a des problèmes de filtrage de mots. Par exemple, ne cherchez pas au milieu des mots, et si vous utilisez & nbsp pirater des aligments, les options complètes seront également ignorées. Retour à la planche à dessin.
Pourquoi j'ai choisi select2 plutôt que choisi
La caractéristique clé de select2, qu'aucun autre contrôle ne possède comme par magie, est la sélection "Effacer tout" avec le "x" dans la partie droite du contrôle. Ceci est une fonctionnalité mortelle pour mon application. Je ne sais pas pourquoi cette fonctionnalité n’est pas disponible dans les autres bibliothèques d’amélioration de balises sélectionnées.
Select2 prend en charge AJAX choisi ne le fait pas
Sélectionnez 2 est un peu plus lourd en taille par rapport à choisi.
Je suis passé à Select2 car aucun support officiel pour les opérations ajax.