Test "Meilleur validation des adresses lors de la demande de contreparties"
Objectif
Ajouter une fonctionnalité d’autocomplétion sur le champ adresse1 du profil utilisateur, accessible à cette URL : http://127.0.0.1:8000/fr/user/address. L’autocomplétion doit proposer des adresses en fonction de la saisie de l’utilisateur.
Services utilisés
- FOSJsRoutingBundle (lien GitHub) : pour appeler une route Symfony depuis un fichier JavaScript.
- API Géoplateforme (lien officiel) : pour récupérer les suggestions d’adresses.
Mise en place
1. Installation de FOSJsRoutingBundle
Exécuter la commande suivante pour installer le bundle :
composer require friendsofsymfony/jsrouting-bundle
Ce bundle permet d’appeler une route Symfony directement depuis un fichier JavaScript, via Routing.generate('api_geopf_autocomplete').
2. Création du service GeoPFApiService
Ajout du service src/Service/API/GeoPFApiService.php, qui gère les appels à l’API Géoplateforme.
Fonctionnement :
-
La méthode
getAddressSuggestionseffectue un appel API à l’URL suivante :$this->httpClient->request('GET', 'https://data.geopf.fr/geocodage/search'); -
Les résultats sont formatés sous forme de tableau associatif :
$results[] = [ 'id' => $feature['properties']['id'], 'text' => $feature['properties']['label'], 'adresse' => $feature['properties']['name'], 'cp' => $feature['properties']['postcode'], 'ville' => $feature['properties']['city'], ];
3. Création du contrôleur GeoPFApiController
Ajout du contrôleur src/Controller/Api/GeoPFApiController.php, qui fait le lien entre le service et la requête AJAX effectuée dans le JS.
Fonctionnement :
- Le contrôleur est appelé via jQuery, grâce à un appel AJAX.
- Il récupère la saisie de l’utilisateur et la transmet au service
GeoPFApiServicepour obtenir les suggestions d’adresses.
4. Intégration JavaScript
Un fichier JavaScript gère l’événement sur le champ adresse1 :
- Écoute de la saisie : affiche les résultats au fur et à mesure. Temporisation de 10 caractère afin de ne pas faire un call sur "[NUMERO DE RUE] rue"
-
Sélection d’une adresse : remplit automatiquement les champs
adresse1,cpetcitylors du clic sur une suggestion.