Autocomplete Belgium Step by step

Autocomplete a Belgium address.

Note: This is the documentation for the v2 API which is still in beta.

Set up a quick form to try out the Belgian Autocomplete functionality by following the steps below.

Step 1: build the HTML page

We start by creating an empty HTML page, containing a minimal web page structure.

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

Add the following code between the <body> and </body> tags.

It adds the input fields for entering the address.

Step 2: add interaction

Add the following JavaScript code in a separate .js file. The IDs and Class names of the HTML elements should match with the ones specified in this JavaScript file in order to get the correct results.

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);
    }
});