Steden laten verschijnen na het ingeven van een postcode in formulier

Je kent ze wel, die automplete velden.
Een klant vroeg me om enkel 1 veld te hebben betreft de ‘gemeente’: dat was enkel een postcode-veld.
Vermits er meerdere gemeente achter een postcode kunnen hangen is dit standaard geen oplossing.

1ste test

De eerste keuze voor adres-completion, dan kijk je naar Google Maps AP en ik had dit artikel gevonden.
Voor België bleek dit niet de oplossing te zijn: bv postcode 2460 gaf nog steeds enkel Kasterlee aan; en niet de andere mogelijkheden Lichtaart en Tielen.

2de test

Voor een 2de test kwam ik terecht bij zippopotam.us.
Voor het opzoeken van 1 postcode + 1 gemeente werkte het perfect.
Wederom bij meerdere mogelijkheden bleef het een probleem en kreeg ik het script niet in werking.

3de test: kan het echt niet makkelijker?

Ik was er van uitgegaan dat bezoekers eerst een postcode moesten ingeven; daarna volgde automatisch een autocompletion voor een 2de veld.
Dus we zaten met 2 velden.
Maar … het gaat eigenlijk over hetzelfde; dus waarom… 2 velden.

De derde oplossing lag in een auto-suggest van mogelijkheden: bezoekers mogen ingeven wat ze willen: cijfers en letters. Tot ze hun eigen gemeente zien.
Vermits ik werk met Gravity Forms als formulier-plugin kwam ik al snel terecht bij deze plugin: Gravity Forms Autocomplete

Na plugin installatie verkrijg je dan een nieuwe veldentype:

Na toevoeging van het Auto Complete veld krijg je dit:

Je verwijst naar een json file et voila!

 

Nog op zoek naar een json postcode overzicht van Belgie?

Deze heb ik ook even bij elkaar moeten schrapen, omzetten van een CSV naar JSON.
Maar bij deze wil ik deze graag met jullie delen.

JSON postcodes van België

 

Conclusie van de dag

Ook al denk je iets op te lossen met een mooie technische oplossing zoals Google Maps Api en andere externe postcode-dienst.
Je hoeft het niet zo ver te zoeken; en we besparen 1 veld van een formulier.
En qua laadtijd zit het ook goed omdat er geen andere services aan te pas komen.
Dus top!