2 mars 2013
Category:
Javascript
Comments: 0

Autocomplete jQuery : Typeahead.js par Twitter

Twitter serait il devenu accro à l’Open Source ? Pendant longtemps ils n’ont pas fait de bruit, et depuis qu’ils ont sortie le célèbre framework Bootstrap la communauté attends impatiemment de nouveaux projets. Le dernier de ces projets se nomme Typeahead.js un plugin jQuery d’autocomplétion qui peut être adapté pour n’importe lequel de vos champs texte. Les données de ce champs peuvent être côdés soit en dure, soit à partir d’un fichier type JSON appelant des données locales ou distantes.

Typeahead.js: l’autocomplétion à son meilleur niveauPLUS D’INFOS / DEMO

typeahead

Appuyé par jQueryl 1.9, les développeurs de Twitter on créer ce plugin pour leur propre besoins, s’assurant une meilleure flexibilité, ainsi que de nouvelles fonctionnalités et une intégration simple à mettre en place. Depuis quelques jours cette solution a été publié sur Github sous la licence MIT libre, permettant un usage privé ou commercial, les contributeurs étant les bienvenus.

Ce qui démarque Typeahead.js des autres solutions d’autocomplete, c’est sa manière d’utiliser les données. Une des façons les plus simple, et courante, consiste à coder en dur ces données dans le document HTML. Si ce plugin ce limitait à cette solution, nous n’en ferions pas son éloge, bien que cette solution soit certainement la meilleure dans le cadre d’un nombre limité de données.

Commençons par un petit bout de code brut, avec les planètes de notre système solaire :

A noter que Typeahead.js supporte l’alignement de texte à droite, pratique pour les langues arabes !
autocomplete-arabe

Pour des projets plus avancés, le meilleur moyen sera de s’appuyer sur un fichier JSON. Plusieurs solutions peuvent être mise en place. Les fichiers JSON fournissent les données d’un stockage externe, qui seront alors extraite dans un stockage local, permettant de garantir une plus grande rapidité des requêtes :

autocomplete-pays

Typeahead.js arrive avec un fichier CSS qui ne vous offrira pas une grande expérience visuelle, simplement une suggestion d’alignement et de positionnement des termes, dans un menu déroulant. Pour améliorer l’expérience utilisateur, la rendre plus attractive, Typeahead.js crée des class en fonction des étapes du processus d’autocomplétion, vous permettant d’intervenir et d’appliquer un style approprié ) chaque étape.

Si vous êtes déjà utilisateur de Bootstrap, vous êtes certainement intéressé par ce nouveau plugin (remplaçant le précédent inclus dans bootstrap). Il vous sera très simple de remplacer l’ancienne fonction par cette nouvelle, simplement en appelant Typeahead.js juste après Bootstrap, puis de le configurer selon vos besoins.



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *