Dutch address autocomplete with Alpine.js · vanrossum.dev    

       vanrossum.dev 

 Article

Dutch address autocomplete with Alpine.js
=========================================

 ![](https://vanrossum.dev/images/jeffrey-portrait.webp) By Jeffrey van Rossum

  vanrossum.dev  

  [      vanrossum.dev ](https://vanrossum.dev)                      

  [ ← Writing ](https://vanrossum.dev/posts)   [ ← Writing ](https://vanrossum.dev/posts) [ Using Alpine.js ](#using-alpinejs) [ Address API ](#address-api) [ The getAddress function ](#the-codegetaddresscode-function) [ Demo ](#demo) 

In the Netherlands, it's common for forms with address fields to try and autocomplete the street and city based on the zipcode and house number.

Using Alpine.js
---------------

In order to achieve this with [Alpine](http://alpinejs.dev), we would have to trigger the fetching of the data when the user has filled in the zipcode and house number field. Then, the result should be set on the address and city fields. We can do this with the `@input` event listener.

We will listen on both fields and then handle the lookup in a separate function called `getAddress`.

```html

    Zipcode

    House number

    Street

    City

```

The function gets three values. One holds the Alpine data which we need to later modify the data with the results fetched from the API. The other two are the values from the zipcode and the house number fields.

Address API
-----------

There are several commercial API's that provide you with a way to look up address information, but there is a free API from the government as well.

In this example, we will be using the free API from [Nationaal Georegister](https://geodata.nationaalgeoregister.nl).

The `getAddress` function
-------------------------

The function to fetch the address is `async`, because we need to wait for the API response. We also do some basic checks, because we don't want to send requests when the fields are incomplete. We also make sure the zipcode contains 6 characters. This all could be further polished up.

```js
async function getAddress($data, _zipcode, number) {
  let zipcode = _zipcode.replace(/\s/g, '');

  if(zipcode.length < 6 || number.length === 0) {
    return;
  }

  let response = await fetch('https://api.pdok.nl/bzk/locatieserver/search/v3_1/free?fq=postcode:'+zipcode.replace(/\s/g, '')+'&fq=huisnummer~'+number+'*');

  let data = await response.json();

  if(data.response.numFound === 0) {
    $data.street = null;
    $data.city = null;

    return;
  }

  $data.street = data.response.docs[0].straatnaam;
  $data.city = data.response.docs[0].woonplaatsnaam;
}

```

Demo
----

  ![](https://vanrossum.dev/images/jeffrey-portrait.webp) Jeffrey van Rossum [@jeffreyrossum](https://x.com/jeffreyrossum) 

 share [𝕏](https://twitter.com/intent/tweet?url=https%3A%2F%2Fvanrossum.dev%2Fposts%2Fdutch-address-autocomplete-with-alpinejs&text=Dutch+address+autocomplete+with+Alpine.js) [WhatsApp](https://wa.me/?text=Dutch+address+autocomplete+with+Alpine.js+https%3A%2F%2Fvanrossum.dev%2Fposts%2Fdutch-address-autocomplete-with-alpinejs) [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fvanrossum.dev%2Fposts%2Fdutch-address-autocomplete-with-alpinejs) 

   © 2026 Jeffrey van Rossum 

  vanrossum.dev vanrossum.dev