You are here: home » projects » pro6pp » example_autocomplete

Toepassingen van Pro6PP

Copy-paste

De webservice gebruiken

De communicatie met de webservice werkt op basis van een HTTP GET, welke JSON data teruggeeft.
Enkele voorbeelden in verschillende programmeertalen voor het uitvoeren van een webservice call en het verwerken van het resultaat:
Javascript, PHP, C#, VB.NET, Python
(Doe een aanvraag voor een voorbeeld in een andere taal).

Adres aanvullen (javascript)

Na het invullen van een postcode worden de straat en plaats getoond. Hierdoor kunnen adresgegevens op formulieren automatisch worden aangevuld. De enige eisen die gesteld worden aan het HTML formulier zijn enkele toegevoegde 'class' eigenschappen bij de invoervelden postcode ('postcode'), huisnummer ('streetnumber'), straat ('street' en 'streets') en woonplaats ('city'), en de plaats waar eventuele foutboodschappen komen te staan ('message'). Een minimaal voorbeeld (zonder enige layout):

<form action="#" class="aanvullen">
  <input type="text" class="postcode" />
  <input type="text" class="streetnumber" />
  <input type="text" class="street" readonly="readonly" />
  <select style="display:none" class="streets"><option></option></select>
  <input type="text" class="city" readonly="readonly" />
  <span class="message"/>
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>
<script type="text/javascript">
$(document)
        .ready(function() {
                // Pas de Pro6PP autocomplete plugin toe op het formulier met de class 'aanvullen'.
	        $('.aanvullen').applyAutocomplete();
});
</script>
Voorbeeld: HTML + JS

Dubbel adres aanvullen (Javascript)

Voor het invullen van twee adressen op één pagina (b.v. factuuradres en verzendadres) moet de 6PP autocomplete plugin worden toegepast op twee formulieren.

Het is overigens niet verplicht om twee aparte formulieren te gebruiken, het gaat erom dat binnen deze 'parent' classes 'factuuradres' en 'verzendadres' elk hun eigen 'postcode', 'street', 'streets' en 'city' classes gevonden kunnen worden door de plugin.

<form action="#" class="factuuradres">
  ...
</form>

<form action="#" class="verzendadres">
  ...
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>
<script type="text/javascript">
$(document)
        .ready(function() {
	        $('.factuuradres').applyAutocomplete();
	        $('.verzendadres').applyAutocomplete();
});
</script>
Voorbeeld van dubbele invoer in 2 forms: HTML + JS
Voorbeeld van een drietal adressen in 1 form: HTML + JS

API call: autocomplete

Behalve Javascript kan in principe elke programmeertaal worden gebruikt. Dit zijn de instructies voor algemeen gebruik.

Er zijn 2 parameters verplicht:
De 'auth_key' parameter. Dit is de key welke is toegewezen bij het openen van een Pro6PP (proef)account.
De 'nl_sixpp' parameter. Geef hier de postcode op om gegevens over te verkrijgen.

http://api.pro6pp.nl/v1/autocomplete?auth_key=YOUR_AUTH_KEY&nl_sixpp=5408xb
{"status": "ok",
 "results": [ {"nl_sixpp": "5408XB",
               "street": "Reestraat",
               "city": "Volkel",
               "municipality": "Uden",
               "province": "Noord-Brabant",
               "lng": 5.6526,
               "lat": 51.64464}
            ]
}

Sommige postcodes beslaan twee straten, zoals 2987XS:

http://api.pro6pp.nl/v1/autocomplete?auth_key=YOUR_AUTH_KEY&nl_sixpp=2987XS
{"status": "ok",
 "results": [ {"nl_sixpp": "5408XB", "street": "de la Reijstraat", "city": "Ridderkerk", "municipality": "Ridderkerk", "province": "Zuid-Holland", "lat": 51.866667, "lng": 4.6},
              {"nl_sixpp": "5408XB", "street": "Westerhof", "city": "Ridderkerk", "municipality": "Ridderkerk", "province": "Zuid-Holland", "lat": 51.866667, "lng": 4.6}
            ]
}

In plaats van het gewenste resultaat kunnen er ook foutmeldingen optreden. Deze foutmeldingen volgen deze vorm:

{'status': 'error',
 'results': [],
 'error': {'message': 'nl_sixpp not found'}
}

'Invalid nl_sixpp format': Het formaat dient te bestaan uit 4 cijfers en 2 letters. Extra spatiëring en gebruik van hoofd- of kleine letters worden automatisch gecorrigeerd.
'nl_sixpp not found': De opgevraagde postcode is niet bekend in de database.

Algemene foutmeldingen zijn elders beschreven.

last modified on 2010-09-06 @ 12:50