Autovervollständigen Dänemark Schritt für Schritt

Autocomplete a Danish address.

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

Richten Sie ein Schnellformular ein, um die Dänisch Autocomplete-Funktionalität auszuprobieren, indem Sie die folgenden Schritte ausführen.

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>Dänisch Autocomplete tutorial</title>
    </head>
    <body></body>
  </html>

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

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

Schritt 2: Interaktion hinzufügen

Fügen Sie den folgenden JavaScript-Code in eine separate .js-Datei ein. Die IDs und Klassennamen der HTML-Elemente sollten mit denen in dieser JavaScript-Datei übereinstimmen, um die richtigen Ergebnisse zu erhalten.

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const pro6ppAuthKey = "AUTH_KEY"; // Replace with your actual authorization key

  // Obtain references to the form fields where we'll obtain the input for the API request
  const postcodeInput = document.getElementById("postcode");
  const settlementInput = document.getElementById("settlement");
  const streetnumberInput = document.getElementById("streetNumber");
  const streetInput = document.getElementById("street");

  let messageSpan = document.querySelector(".message");

  // Obtain references to the form fields where we'll show the responses
  let municipalityInput = document.getElementById("municipality");
  let provinceInput = document.getElementById("province");
  let regionInput = document.getElementById("region");

  let jsonResponseSpan = document.querySelector(".jsonResponse");

  const BASE_URL = "https://api.pro6pp.nl/v2";
  function fetchAddress(postcode, settlement, street, streetNumber) {
    const encodedPostcode = encodeURIComponent(postcode);
    const encodedSettlement = encodeURIComponent(settlement);
    const encodedStreet = encodeURIComponent(street);
    const encodedStreetNumber = encodeURIComponent(streetNumber);
    const url = `${BASE_URL}/autocomplete/dk?postalCode=${encodedPostcode}&settlement=${encodedSettlement}&street=${encodedStreet}&streetNumber=${encodedStreetNumber}&authKey=${pro6ppAuthKey}`;

    fetch(url)
      .then(async (response) => {
        const data = await response.json();
        if (data) {
          municipalityInput.value = data.municipality;
          provinceInput.value = data.province;
          regionInput.value = data.region;
          messageSpan.textContent = "";
          jsonResponseSpan.textContent = JSON.stringify(data, null, 2);
        }
      })
      .catch((error) => {
        console.error("Error fetching address:", error);
        messageSpan.textContent = error.message;
      });
  }

  const form = document.getElementById("addressForm");
  // cspell:disable-next-line
  form.onsubmit = function (event) {
    event.preventDefault();
    const postcode = postcodeInput.value;
    const settlement = settlementInput.value;
    const streetNumber = streetnumberInput.value;
    const street = streetInput.value;
    fetchAddress(postcode, settlement, street, streetNumber);
  };
});

Schritt 3: Umsetzung in die Praxis

Verknüpfen Sie die JavaScript-Datei innerhalb der .html direkt vor dem Schließen des Tags </body>. Ersetzen Sie {filename} durch Ihren tatsächlichen JavaScript-Dateinamen.

<script src="{filename}.js"></script>

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 AUTH_KEY durch Ihren persönlichen Autorisierungsschlüssel.