Autocomplete België Stap voor stap

Autocomplete a Belgium address.

Opmerking: Dit is de documentatie voor de v2 API die nog in beta is.

Stel snel een formulier in om de functionaliteit Belgische Autocomplete uit te proberen door de onderstaande stappen te volgen.

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>Belgische Autocomplete tutorial</title>
    </head>
    <body></body>
  </html>

Voeg de volgende code toe tussen de tags <body> en </body>.

Het voegt de invoervelden toe voor het invoeren van het adres.

Stap 2: voeg interactie toe

Voeg de volgende JavaScript-code toe in een apart .js-bestand. De ID's en klassenamen van de HTML-elementen moeten overeenkomen met de in dit JavaScript-bestand gespecificeerde elementen om de juiste resultaten te krijgen.

JavaScript

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

    let messageSpan = document.querySelector(".message");
    let jsonResponseSpan = document.querySelector(".jsonResponse");
    const BASE_URL = "https://api.pro6pp.nl/v2";

    function fetchAddress(authKey) {
        const queryParams = { 
            postalCode: document.getElementById("postalCode").value,
            street: document.getElementById("street").value,
            streetNumberAndPremise: document.getElementById("streetNumberAndPremise").value,
            streetNumber: document.getElementById("streetNumber").value,
            premise: document.getElementById("premise").value,
            box: document.getElementById("box").value,
            authKey: authKey 
        };

        let encodedUrl = new URL(`${BASE_URL}/autocomplete/be`);
        encodedUrl.search = new URLSearchParams(queryParams);

        fetch(encodedUrl)
            .then(async (response) => {
                const data = await response.json();
                if (data) {
                    messageSpan.textContent = "";
                    jsonResponseSpan.textContent = JSON.stringify(data, null, 2);
                }
            })
            .catch((error) => {
                console.error("Error fetching: ", error);
                messageSpan.textContent = error.message;
            });
    }

    const form = document.getElementById("form");
    form.onsubmit = function (event) {
        event.preventDefault();
        fetchAddress(pro6ppAuthKey);
    }
});

Stap 3: laat het werken

Koppel het JavaScript-bestand in de .html vlak voordat u de </body>-tag sluit. Vervang {filename} met uw daadwerkelijke JavaScript-bestandsnaam.

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

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 AUTH_KEY door uw persoonlijke autorisatiesleutel.