Accueil / Blog / Métier / 2016 / Comparaison de plugins JS : les select widgets

Comparaison de plugins JS : les select widgets

Par Sébastien Corbin publié 17/06/2016
Beaucoup de plugins existent pour rendre plus beaux ou plus pratiques les éléments HTML select, petite comparaison pour choisir le bon
Comparaison de plugins JS : les select widgets

Nos amis graphistes pensent parfois qu'avoir des listes déroulantes (et donc leurs options) aux couleurs de votre charte graphique est un jeu d'enfant, or en 2016 il est encore difficile de plier l'affichage des éléments de formulaires, qu'il s'agisse de checkbox, select ou encore de boutons radio.

Des propriétés CSS telles que "appearance" font tranquillement leur chemin mais leur support par les navigateurs et très faible et laissent peu de place à la personnalisation. Prenons comme exemple ce que l'on peut faire en CSS3 : http://cssdeck.com/labs/styling-select-box-with-css3, l'utilisation de propriétés préfixées par le navigateur montre bien que nous sommes en cours de standardisation.

Il ne reste plus qu'à trouver un plugin JavaScript qui fasse le boulot, l'avantage étant que cela permet d'amener d'autres fonctionnalités à un select : recherche, tagging, chargement des options en ajax, templating des options.

Voici donc pour vous y retrouver les principales bibliothèques mises côte à côte selon des critères pouvant vous aider dans votre choix :

  • navigation au clavier : donne une bonne indication de la qualité de l'intégration
  • accessibilité : et comme navigation au clavier ne veut pas dire accessible, ce critère précise la présence d'attributs ARIA
  • facilité de theming : ceci précise si le design utilise un préprocesseur spécifique (LESS/SASS) ou la difficulté à écrire du CSS pour le plugin
  • thèmes : si le widget fournit une intégration de base avec différents frameworks CSS
  • templating des options : il peut souvent être utile d'avoir des options dont le HTML est différent
  • ajax : si la liste d'options peut être chargée par une requête asynchrone
  • recherche : si une fonctionnalité de recherche est présente dans le champ
  • tagging : si une fonctionnalité de création d'option à la volée est présente dans le champ
  • taille minifiée : si la performance réseau est votre critère
  • activité : précise l'activité de maintenance du plugin sur Github
  • i18n/RTL : support des diacritiques et de la lecture de droite à gauche
  • programmation : facilité de travailler avec et étendue des options et API du plugin
  • fallback mobile : si le plugin ne remplace *pas* la sélection native en mobile, souvent plus pratique
  • responsive : si le plugin n'est pas trop fixe en CSS et permet de s'adapter à la taille de son conteneur
  • tests : la présence de tests est souvent gage de qualité
  • npm/bower : si le plugin s'expose à la communauté

Je vous conseille de bien prendre en compte tous les critères, car si par exemple select2 est le plugin qui sort du lot, il est aussi le plus lourd, il sera donc approprié en cas d'utilisation poussée, mais si vous souhaitez uniquement charter vos select sur Bootstrap3 en restant accessible, je vous conseillerais Bootstrap-Select.

Nom de la bibliothèqueSelect2ChosenSelectizeSelectBoxItDropkickFancySelectSelect InspirationBootstrap SelectZelectSumo SelectSelectatorSelectric
Version 4.0.3 1.5.1 0.12.1 3.8.1 2.1.8 1.1.0 1.0.0 1.10.0 0.0.9 3.0.2 1.11.0 1.9.6
Dépendances jQuery jQuery ou Prototype jQuery jQuery
jQuery UI
Widget
jQuery en option jQuery ou Zepto Aucune jQuery
Bootstrap Dropdown
jQuery jQuery jQuery jQuery
Navigation
au clavier
Oui Oui Oui Oui Oui Oui Oui Oui Non Oui Oui Oui
Accessibilité Oui Non Non Oui Oui Non Non Oui Non Non Non Non
Facilité theming SASS SASS LESS SASS Moyen Facile Moyen LESS/SASS Facile Difficile Stylus SCSS
Thèmes Bootstrap 3
Flat UI
Metro UI
Non Bootstrap 3 Bootstrap
jQueryUI
jQuery Mobile
Non Aucun Aucun Bootstrap Nu Aucun Aucun Nombreux
Templating
des options
Oui Non Non Oui Non Oui Non Oui Oui Non Non Oui
Dépot Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien
Demo Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien
Ajax Oui Non Non Non Non Non Non Non Oui Non Non Oui
Recherche Oui Oui Oui Non Non Non Non Oui Oui Oui Oui Non
Tagging Oui Oui Oui Non Non Non Non Non Non Non Non Non
Taille minifiée 65.1 Ko 28 Ko 36.3 Ko 24.8 Ko 16.8 Ko 1.2 Ko 1.4 Ko 32.5 Ko 2.0 Ko 11.5 Ko 9.7 Ko 10.1 Ko
Activité +++ ++ ++ - ++ + - ++ - + - -
i18n/RTL Oui Oui Oui Non Non Non Non Oui Non Non Non Oui
Programmation +++ + ++ +++ + + - ++ + + + ++
Compatibilité IE IE8+ IE9+ IE8+ IE8+ IE7+ IE7+ IE7+ IE8+ IE7+ IE8+ IE8+ IE7+
Fallback Mobile Non Oui Non Oui Non Oui Non Oui Non Oui Non Oui
Responsive Oui Oui Oui Non Oui Non Oui Oui Oui Oui Non Oui
Tests Oui Non Oui Oui Oui Non Non Non Oui Non Non Oui
NPM/Bower Oui Oui Oui Oui Oui Non Non Oui Oui Oui Non Oui
Licence MIT MIT Apache MIT MIT MIT Libre MIT WTFPL MIT MIT MIT
ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
À Makina, la JS fatigue n'existe pas... 01/04/2019

...car la passion l'emporte

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 13/08/2018

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular. Cet article a été écrit ...

Comment mettre en place Angular Universal Comment mettre en place Angular Universal 29/06/2017

Toutes les étapes détaillées et expliquées. Les pièges à éviter.

Les nouveautés de Typescript 3.0 Les nouveautés de Typescript 3.0 13/08/2018

Typescript 3.0 vient de sortir, voici quelques nouveautés... et des exemples !

Ionic 2 : les nouveautés (retours de l'AngularConnect) Ionic 2 : les nouveautés (retours de l'AngularConnect) 23/10/2015

Des changements radicaux et bienvenus par rapport à la version 1 d'Ionic.