Met deze API call kunnen Nederlandse adressen worden aangevuld.
Gebruik één van beide verplichte parameters:
Deze optionele parameters zijn mogelijk bij gebruik van de nl_sixpp parameter:
Let op, het komt regelmatig voor dat bij een gelijke postcode huisnummer combinatie de huisnummer letters het verschil maken welke straat het adres bevat.
undefined/v1/autocomplete?auth_key=YOUR_AUTH_KEY&nl_sixpp=8042AC&streetnumber=2&extension=t1
Deze aanvraag geeft het volgende resultaat:
{
"status": "ok",
"results": [
{
"nl_sixpp": "8042AC",
"streetnumber": 2,
"extension": "T 1",
"street": "Hasselterweg",
"street_nen5825": "Hasselterweg",
"city": "Zwolle",
"municipality": "Zwolle",
"province": "Overijssel",
"lat": 52.5153137,
"lng": 6.0706741,
"areacode": "038"
}
]
}
Behalve het opvragen van een postcode wordt ook het XML uitvoer formaat gedemonstreerd.
undefined/v1/autocomplete?auth_key=YOUR_AUTH_KEY&nl_sixpp=5408xb&format=xml
Deze aanvraag geeft het volgende resultaat:
<?xml version="1.0" encoding="UTF-8"?>
<response>
<status>ok</status>
<results>
<result>
<nl_sixpp>5408XB</nl_sixpp>
<street>Reestraat</street>
<street_nen5825>Reestraat</street_nen5825>
<streetnumbers>10-56</streetnumbers>
<city>Volkel</city>
<municipality>Uden</municipality>
<province>Noord-Brabant</province>
<lat>51.64464</lat>
<lng>5.6526</lng>
<areacode>0413</areacode>
</result>
</results>
</response>
Postcodes welke gereserveerd zijn voor postbussen (dus geen gewoon adres met een straat) worden ook door Pro6PP geaccepteerd, maar niet gecontroleerd op specifieke postbusnummers. De uitvoer ziet er als volgt uit.
{
"status": "ok",
"results": [
{
"nl_sixpp": "5460AC",
"street": "Postbus",
"city": "Veghel",
"municipality": "Veghel",
"province": "Noord-Brabant",
"lat": null,
"lng": null,
"areacode": "0413"
}
]
}
3133KK met huisnummer 2 bestaat niet. Maar huisnummer 2 met toevoeging a of b wel. Dat is een subtiel verschil, maar wel belangrijk. Het streetnumbers veld stelt ontwikkelaars in staat om gebruikers te helpen met de invoer van deze extensies en deze bijvoorbeeld in een dropdown beschikbaar te stellen.
undefined/v1/autocomplete?auth_key=YOUR_AUTH_KEY&nl_sixpp=3133KK&streetnumber=2
Deze aanvraag geeft het volgende resultaat:
{
"status": "ok",
"results": [
{
"nl_sixpp": "3133KK",
"street": "James Wattweg",
"city": "Vlaardingen",
"municipality": "Vlaardingen",
"province": "Zuid-Holland",
"streetnumbers": "4-6;10-12;16-46;68-70;74;80;84;9;2 a;2 b;2 c;2 d;2 e;2 f;2 g;2 h;2 j;2 k;2 l;2 m;2 n;2 p;2 q;2 r;2 s;2 t;2 u;2 v;2 w;2 x;2 y;2 z;20 a;28 A;4 a;42 A",
"lat": 51.90135,
"lng": 4.31459,
"areacode": "010"
}
]
}
De autocomplete methode wordt gedemonstreerd in deze gebruiksklare voorbeelden:
We raden u aan voorbeeldcode op te vragen in de taal van uw voorkeur. In de tussentijd kan u misschien kijken naar de autocomplete methode, die al in vele talen is gedemonstreerd.
We beginnen met het maken van een lege HTML-pagina met een minimale webpagina structuur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Autocomplete tutorial</title>
</head>
<body></body>
</html>
Download onze JavaScript-bibliotheek autocomplete.zip waarmee we de Pro6PP-webservice kunnen integreren in deze webpagina. Kopieer het in dezelfde map als waarin u de bovenstaande webpagina hebt opgeslagen.
Voeg de volgende code toe tussen de tags <body> en </body>.
Het voegt de invoervelden toe voor het invoeren van het adres.
<form action="#" class="address">
Postcode: <input class="postcode" /> Streetnumber: <input class="streetnumber" />
<span class="message"></span><br />
Street: <input class="street" readonly /><br />
City: <input class="city" readonly />
</form>
Voeg de volgende code toe tussen de tags <head> en </head>. Hiermee wordt de straat en stad automatisch aangevuld wanneer een volledige postcode wordt ingevoerd.
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="autocomplete.js"></script>
<script>
var pro6pp_auth_key = 'YOUR AUTH_KEY';
$(document).ready(function() {
$('.address').applyAutocomplete();
});
</script>
Om toegang te krijgen tot de Pro6PP web service, moet u uw persoonlijke autorisatiesleutel aanvragen. Deze sleutel wordt direct na aanmelden naar u gemaild.
Vervang de tijdelijke aanduiding YOUR_AUTH_KEY door uw persoonlijke autorisatiesleutel.
Open autocomplete.html in uw browser. Het is klaar voor gebruik! Werkt het niet? Probeer de kant-en-klare voorbeeldcode te downloaden.
Laten we de province ook laten zien. Voeg de volgende code toe net voor de tag </form>.
Province: <input class="province" readonly />
Je kunt het patroon hier zien. In plaats van de province kunt u een van deze gebruiken: municipality, areacode, lat, lng of streetnumbers.
Webshops vereisen vaak een tweede adresblok, om factuur- en verzendadressen te scheiden. Dupliceer de adres invoervelden, maar zorg ervoor dat elk adresblok zijn eigen container heeft. Wijzig de
<form action="#">
<div class="billing-address">
Postcode: <input class="postcode" />
...
</div>
<div class="shipping-address">
Postcode: <input class="postcode" />
...
</div>
</form>
Nu we twee adresblokken hebben om automatisch aan te vullen, wijzigt u de regel waar staat ...applyAutocomplete(); naar:
$(".billing-address").applyAutocomplete();
$(".shipping-address").applyAutocomplete();
In plaats van klassen aan uw formulier toe te voegen, kunt u applyAutocomplete() opdracht geven aangepaste veld-ID's te gebruiken. jQuery selector syntax wordt geaccepteerd.
Dit voorbeeld toont voorrang op de standaard-ID van de invoervelden voor postcode en huisnummer met behulp van hun ID.
... Postcode: <input id="billing-zipcode" /> Streetnumber: <input id="billing-streetnumber" />
... ... $(document).ready(function() { $(this).applyAutocomplete({ postcode: '#billing-zipcode',
streetnumber: '#billing-streetnumber', }); });
Je kunt het patroon hier zien. In plaats van de parameters postcode en streetnumber kunt u een van deze gebruiken: street, city, municipality, province, areacode, lat, lng of streetnumbers.
Parameter message bepaalt het container element waarin errors worden weergegeven.
Parameter spinner laat een gegeven (image) element zien tijdens API communicatie.
U kunt het standaardgedrag van de functie applyAutocomplete met behulp van deze parameters wijzigen:
Parameter timeout (standaard: 10000). Wacht 10 seconden voordat je de communicatie met de Pro6PP postcode database opgeeft.
Parameter enforce_validation (standaard: true). Indien ingesteld op 'true', heeft het script een geldig adres nodig dat aanwezig is in de Pro6PP-postcode database. Stel in op 'false' om het invoeren van een aangepast adres toe te staan.
Parameter gracefully_degrade (standaard: true). Indien ingesteld op 'true', zal het script het proces nooit blokkeren in geval van problemen met communicatie met de Pro6PP-postcode database. Stel in op 'false' om te voorkomen dat gebruikers een aangepast adres invoeren vanwege communicatiefouten.