Validation d'adresse FR
Autocomplete a French address.
Remarque : Il s'agit de la documentation de l'API v2 qui est toujours en version bêta.
Étape 1 : créez la page HTML
Nous commençons par créer une page HTML vide, contenant une structure de page Web minimale.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Autocomplete tutorial</title>
</head>
<body></body>
</html>Téléchargez notre bibliothèque JavaScript autocomplete.zip qui vous permet d'intégrer le service Web Pro6PP dans cette page Web. Copiez-le dans le même répertoire que celui où vous avez enregistré la page Web ci-dessus.
Ajoutez le code suivant entre les balises <body> et </body>.
Cela ajoute les champs de saisie pour saisir l'adresse.
<form action="#" class="address">
<div>
<label for="postcode">Postcode:</label>
<input id="postcode" class="postcode">
<label for="streetnumber">Streetnumber:</label>
<input id="streetnumber" class="streetnumber" />
</div>
<div>
<span class="message"></span>
</div>
<div>
<label for="street">Street:</label>
<input id="street" class="street" readonly />
</div>
<div>
<label for="city">City:</label>
<input id="city" class="city" readonly />
</div>
</form>Étape 2 : ajoutez une interaction
Ajoutez le code suivant entre les balises <head> et </head>. Il complète automatiquement la rue et la ville lorsqu'un code postal complet est saisi.
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="autocomplete.js"></script>
<script>
var pro6pp_auth_key = 'YOUR_AUTH_KEY';
$(document).ready(function() {
$('.address').applyAutocomplete();
});
</script>Étape 3 : faites-le fonctionner
Pour accéder au service Web Pro6PP, vous devez demander votre clé d'autorisation personnelle. Cette clé vous est envoyée par e-mail juste après votre inscription.
Remplacez l'espace réservé ci-dessus YOUR_AUTH_KEY par votre clé d'autorisation personnelle.
Étape 4 : le voir en action
Ouvrez autocomplete.html dans votre navigateur. C'est prêt ! Ça ne marche pas ? Essayez de télécharger l'exemple de code prêt à l'emploi.