Address validation BE

Autocomplete a Belgium address.

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

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

Download our JavaScript library autocomplete.zip that allows us to integrate the Pro6PP webservice into this web page. Copy it in the same directory as you saved the above web page.

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

It adds the input fields for entering the address.

<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>

Step 2: add interaction

Add the following code between the <head> and </head> tags. It autocompletes the street and city when a full postcode is entered.

<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>

Step 3: make it work

To access the Pro6PP web service, you need to request your personal authorization key. This key is emailed to you right after signing up.

Replace the above placeholder YOUR_AUTH_KEY with your personal authorization key.

Step 4: see it in action

Open autocomplete.html in your browser. It's ready to use! It doesn't work? Try downloading the ready-to-use example code.