Überprüfung der Adresse NL

Autocomplete a Dutch address.

Hinweis: Dies ist die Dokumentation für die v2-API, die sich noch im Beta-Stadium befindet.

Schritt 1: Erstellen der HTML-Seite

Wir beginnen mit der Erstellung einer leeren HTML-Seite, die eine minimale Webseitenstruktur enthält.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Autocomplete tutorial</title>
  </head>
  <body></body>
</html>

Laden Sie unsere JavaScript-Bibliothek autocomplete.zip herunter, mit der wir den Pro6PP-Webservice in diese Webseite integrieren können. Kopieren Sie sie in das gleiche Verzeichnis, in dem Sie die obige Webseite gespeichert haben.

Fügen Sie den folgenden Code zwischen den Tags <body> und </body> hinzu.

Es fügt die Eingabefelder für die Adresseingabe hinzu.

<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>

Schritt 2: Interaktion hinzufügen

Fügen Sie den folgenden Code zwischen den Tags <head> und </head> hinzu. Es vervollständigt die Straße und den Ort automatisch, wenn eine vollständige Postleitzahl eingegeben wird.

<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>

Schritt 3: Umsetzung in die Praxis

Um auf den Pro6PP-Webdienst zuzugreifen, müssen Sie Ihren persönlichen Autorisierungsschlüssel anfordern. Dieser Schlüssel wird Ihnen direkt nach der Anmeldung per E-Mail zugeschickt.

Ersetzen Sie den obigen Platzhalter YOUR_AUTH_KEY durch Ihren persönlichen Autorisierungsschlüssel.

Schritt 4: In Aktion sehen

Öffnen Sie autocomplete.html in Ihrem Browser. Es ist einsatzbereit! Es funktioniert nicht? Versuchen Sie, den einsatzbereiten Beispielcode herunterzuladen.

Suchen Sie unsere v1 API?

v1-Dokumentation