Adresvalidatie LU

Autocomplete a Luxembourg 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.

Op zoek naar onze v1 API documentatie?

v1 Documentatie