Überprüfung der Adresse AT
Autocomplete a Austria 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.