Retrouvez l'ensemble du code source sur Github.

Pré-requis

  • Disposer d’une clé d’API pour Firmapi que vous pouvez obtenir en vous inscrivant gratuitement.
  • Quelques connaissances en HTML et JavaScript.

Etape 1 : La base HTML

Je vous propose de simplement copier une base pour le HTML. J’ai utilisé Twitter Bootstrap et quelques lignes de CSS :

Etape 2 : Les librairies JS

Quelques librairies JavaScript sont nécessaires :

  • Typehead.js se chargera de générer l’autocomplete de manière générale. Typeahead sera disponible sous la forme d’un plugin de jQuery ;
  • Handlebars.js gère le template utilisé par chacune des suggestions. Vous pouvez aisément passer à Moustache, Underscore, etc. ;
  • JQuery simplifie la sélection d’éléments du DOM et réaliser un appel en AJAX pour extraire les données de l’entreprise sélectionnée.

Etape 3 : Installation de Typeahead.js

Typeahead.js fonctionne avec deux modules très distincts :

  1. Bloodhound, le moteur de suggestion qui à partir des résultats renvoyés par le JSON va essayer de fournir les éléments les plus proches de la requêtes de l’utilisateur. Pour nous cela n’aura pas d’utilité car Firmapi se charge déjà de sélectionner les entreprises.
  2. Le plugin jQuery se chargeant de l’affichage de l’autocomplete.


Commençons par initialiser Bloodhound :


Nous venons avant toute chose d’indiquer que les données sont à charger en AJAX (d’où le terme remote). On indique alors une url à laquelle envoyé les requêtes. Le filtre permet de retraiter les réponses du serveur. En effet voici le JSON retourné par nos serveurs :

Il est donc nécessaire de prendre les entreprises dans result » list et par la suite de créer un Array d’objets contenant les valeurs de chaque entreprises. D’où la nécessité de réaliser une boucle afin de retraîter sur chacun des résultats.


Il ne reste plus qu’à se charger du l’UI (interface utilisateur) avec le plugin jQuery :


Avec jQuery, on sélectionne l’input qui va devenir un autocomplete. Le moteur Bloodhound initialisé précédement va être utilisé. On utilise ensuite un template Handlebar. Vous remarquerez que les variables définies dans le filtre de Bloodhound sont disponibles avec . Dans le template, utilisez librement HTML et classes CSS.

L’API renvoie en plus du nom de l’entreprise, son SIREN, son code postal et son code NAF. Pour exploiter ces informations, des événements sont déclenchés par Typeahead et en particulier typeahead:selected lorsqu’un résultat est sélectionné. Ici nous appelons la fonction complete_company(siren) pour remplir la page mais vous pouvez tout aussi bien enregistrer des champs formulaire pour accélérer la saisie, etc.

Résultat final

Conclusion

En quelques dizaines de minutes vous pouvez ainsi ajouter à votre site un autocomplete parfaitement fonctionnel. N’oubliez toutefois pas de faire passer toutes les requêtes par votre serveur afin de cacher votre clé API et éviter des abus de la part de vos utilisateurs.


Antoine Finkelstein
Antoine Finkelstein