Image fusée

Module d'auto-complétion avec l'API Geocoder HERE & Vue.js

Si vous ne l'avez pas encore lu, je vous invite à découvrir l'article de Jordan, tout ce qui compose HERE et en fait un outil indispensable (en tous cas chez TPZ!).

Le but de cet article est double : vous mettre à disposition un module codé par mes petites mimines et vous illustrer la rapidité et la puissance de mise en œuvre de Vue.js hors d'un contexte préposé à cette technologie (car oui, ce module pourra être intégré dans n'importe quel site ! ) et encore une fois, l'utilité d'HERE sur la récupération de coordonnées.

Aperçu

Le module n'est rien d'autre qu'une liste de choix de ville avec l'information sur son code postal, un outil d'auto-complétion classique mais qui permet de valider le ville sélectionnée grâce à son code postal car il existe des homonymes sur les villes françaises (CF Saint-Sauveur)

Voici ce que permet d'obtenir le module : Cliquez ici !

Aperçu du module d'auto-complétion

Décomposition

code-html
Code HTML

Pour commencer, le module est composé d'un champ 'input' text standard pour renseigner la ville recherchée avec 2 évènements Vue qui sont 'bindés' : le keyup & le keydown qui permettent comme leurs noms l'indique de détecter lorsque qu'une touche de votre clavier est pressée afin d'appeler la fonction 'onKeypressCity'.

Sur ce champ également, vous remarquerez un data binding sur la valeur du champ via l'instanciation d'un model vue : v-model="inputCity" qui va nous permettre côté Vue de récupérer la valeur du champ très rapidement.

Notez ici, que j'aurais pu utiliser les watcheurs VueJS sur le model inputCity afin de remplacer les évènements keyup & keydown mais j'ai décidé de ne pas l'intégrer pour éviter une boucle infinie, si vous vouliez par exemple attribuer la valeur de la sélection à votre champ.

code-vuejs
Code VueJS

Évidemment, les fonctions nommées précédemment et les variables doivent être déclarées. Ainsi que la logique dans le fichier JS qui instancie Vue (new Vue())

On retrouve dans ce fichier les datas nommées comme notre modèle. Ou encore la liste des suggestions et leurs valeurs par défaut.

De plus, on trouve la fonction la plus intéressante 'onKeypressCity' qui permet l'auto-complétion en faisant un appel à l'API Geocoder HERE. Cela nous permet de récupérer un certain nombre d'informations (ça ne se limite pas à la ville & code postal) : latitude, longitude, adresse, etc ...

Comme précisé plus haut, à chaque pression sur une touche de votre clavier elle se déclenche.

D'ailleurs l'API HERE permet de trouver des adresses complètes notamment pour des livraisons, etc ..
Pour rappel, HERE possède un plan d'utilisation gratuit jusqu'à 200.000 requêtes par mois. Ce qui n'est pas négligeable en comparaison avec Google Maps.

Vous trouverez toutes les informations ici : API Geocoder HERE

A noter : Il vous faudra alimenter les variables here_id & here_code avec vos identifiants HERE pour que les suggestions apparaissent !

Mise à disposition

Bien sûr ! Le code est à votre disposition : Télécharger le module

Et voici d'autres ressources :

Si vous l'utilisez tel quel sur un de vos sites ou/et que vous l'alimentez de quelques façons, n'hésitez pas à nous en faire part dans les commentaires ;)

Laissez nous un commentaire

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

Vous aimerez aussi ...

Image Tailwind CSS

Tailwind CSS

Aujourd’hui je vous parle d’un framework CSS que j’affectionne pour sa simplicité de configuration…

06/03/2020 | 0
Icone fusée

Démarrez votre projet digital !

Je me lance