Adresvalidatie FR
Autocomplete a French address.
Opmerking: Dit is de documentatie voor de v2 API die nog in beta is.
Stap 1: bouw de HTML-pagina
We beginnen met het maken van een lege HTML-pagina met een minimale webpagina structuur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Autocomplete tutorial</title>
</head>
<body></body>
</html>Download onze JavaScript-bibliotheek autocomplete.zip waarmee we de Pro6PP-webservice kunnen integreren in deze webpagina. Kopieer het in dezelfde map als waarin u de bovenstaande webpagina hebt opgeslagen.
Voeg de volgende code toe tussen de tags <body> en </body>.
Het voegt de invoervelden toe voor het invoeren van het adres.
<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>Stap 2: voeg interactie toe
Voeg de volgende code toe tussen de tags <head> en </head>. Hiermee wordt de straat en stad automatisch aangevuld wanneer een volledige postcode wordt ingevoerd.
<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>Stap 3: laat het werken
Om toegang te krijgen tot de Pro6PP web service, moet u uw persoonlijke autorisatiesleutel aanvragen. Deze sleutel wordt direct na aanmelden naar u gemaild.
Vervang de tijdelijke aanduiding YOUR_AUTH_KEY door uw persoonlijke autorisatiesleutel.
Stap 4: zie het in actie
Open autocomplete.html in uw browser. Het is klaar voor gebruik! Werkt het niet? Probeer de kant-en-klare voorbeeldcode te downloaden.