L’article d’aujourd’hui est un partage de script simple en jQuery. il vous permet de relier un formulaire de 3 champs (adresse, code postal et ville), avec une API de Géocodage.
En notant une adresse dans le champ, le script vous propose une liste d’adresses qui peuvent correspondre à votre demande. En cliquant sur l’adresse que vous rechercher, cela rempli les 3 champs avec les valeurs correspondantes.
Je vous partage le code sur codepen, pour que vous puissiez le tester : Dynamic form – geocoding API
Le script possède quelques dépendances : bootstrap 4.5 pour le CSS et Jquery 3.6 pour le Javascript.
Vu la simplicité du code, il est possible de se défaire de ces dépendances, avec quelques modifications.
L’API utilisé se situe à l’URL https://geo.api.gouv.fr/adresse. Elle est simple à utiliser, et la documentation est en Français. C’est pour cela que j’ai pu imaginer et créer ce petit script en moins d’une demi-journée.
Ce script peut être largement améliorable, par exemple en ajoutant d’autres fonctionnalités avec Google Maps, voir Leaflet.
Que pensez-vous de ce petit script !
laurent
16 août 2021 à 8 h 59 min
bonjour guillaume ,
et merci pour ce petit script super …
bon moi étant novice en js , je n’arrive pas à le faire fonctionner , pourrais tu m aiguiller un peu …
merci à toi
laurent
guillaume
16 août 2021 à 18 h 27 min
Bonjour Laurent,
Pas de problème, peux tu me dire le problème que tu rencontres
laurent
17 août 2021 à 17 h 33 min
bonjour guillaume,
en fait l’autocomplète ne fonctionne pas , quand je commence à taper une adresse , rien ne s’affiche dans la balise ul …
il doit forcément y avoir quelque chose que j’ai mal fait ..
merci pour ton aide.
guillaume
19 août 2021 à 17 h 26 min
As-tu mis ton script sur internet, que je puisse le regarder.
Ou alors me l’envoyer.
Je t’envoie un mail.
louvard
28 octobre 2022 à 10 h 10 min
Bonjour Guillaume,
Votre exemple m’intéresse beaucoup et merci du partage.
J’ai repris votre code tel mais l’autocomplete ne ramène rien. Avez-vous d’autres commentaires de ce type ?
guillaume
29 octobre 2022 à 19 h 38 min
Bonjour,
Non, je n’ai pas de retour de ce genre.
Je regarderai cette partie-là, pour reproduire le bug.