Autocomplete Switzerland Step by step

Autocomplete a Swiss address.

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

Set up a quick form to try out the Swiss 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>Swiss 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

  // 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 cantonInput = document.getElementById("canton");
  let districtInput = document.getElementById("district");
  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/ch?postalCode=${encodedPostcode}&settlement=${encodedSettlement}&street=${encodedStreet}&streetNumber=${encodedStreetNumber}&authKey=${pro6ppAuthKey}`;

    fetch(url)
      .then(async (response) => {
        const data = await response.json();
        if (data) {
          cantonInput.value = data.canton;
          districtInput.value = data.district;
          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);
  };
});