Let's start with a simple example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>AddressFinder Hello World Demo</title>
<script src="http://api.addressfinder.co.nz/af?key=ABCDE&v=1" type="text/javascript">
</script>
</head>
<body>
<input id="ac_me" type="text" style="width:500px;"/>
<p><strong>Selected location:</strong></p>
<div id="info" style="width: 500px; height: 300px;"></div>
<script type="text/javascript">
function show_address(item) {
var address = item.a;
document.getElementById("info").innerHTML = address;
}
af_initialise(document.getElementById("ac_me"), show_address);
</script>
</body>
</html>
Include loader script, with API Key and Version
<script src="http://api.addressfinder.co.nz/af?key=ABCDE&v=1" type="text/javascript">
</script>
Create an input element for address entry.
<input id="ac_me" type="text" style="width:500px;"/>
Write a javascript function to add address autocomplete widget to the input element.
<script type="text/javascript">
function show_address(item) {
var address = item.a;
document.getElementById("info").innerHTML = address;
}
af_initialise(document.getElementById("ac_me"), show_address);
</script>
This function initialises Addresss Finder on the "ac_me" input element. In addition, we pass in a callback to print out any selected addresses to the "info" div element. You should now be able to type addresses into the text field and suggestions will appear.
The non-interactive api allows calls to be made to the addressfinder service where a full address is given (with or without a name). The addressfinder attempts to match this unstructured address data to a valid NZ postal geocoded and structured address. The non-interactive version is perfect for cleansing your address data, batch address validation/processing, or non javascript based address parsing.