International Auto Complete
Our international AJAX autocomplete control is based on our cool SmartForm™ system. You get all the swanky completion stuff but on your own form rather than the one we provide.
Using the control is incredibly easy and requires very little JavaScript plumbing.
Step 1: Your HTML Page
First of all, you obviously need a HTML page to capture addresses. Make sure you've got all your form elements on it and that you collect country first, then postcode then the rest of the address items.
To start with, you need to put some JavaScript on your page in the HEAD tag. At the same time, it's worth putting in the CSS styles to make it look pretty. You can change the styles to suit you page later on. Here's what you need (remember to put your own account + key details in the SCRIPT source url):
<head>
<script src="http://services.postcodeanywhere.co.uk/javascript/internationalautocomplete.aspx?account_code=AAAAA11111&license_key=AA11-AA11-AA11-AA11&version=2"></script>
<style>
.autocomplete {border-bottom:solid 1px #aaaaaa; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background-color:#fafafa}
.autocomplete A {text-decoration:none; color:#000000}
.autocomplete .item {padding:5px; border-bottom:solid 1px #aaaaaa; background-color:#fafafa}
.autocomplete .itemhover {padding:5px; border-bottom:solid 1px #aaaaaa; background-color:#f0f0f0}
.autocomplete .itemlast {border-top:solid 1px #aaaaaa; background-color:#ffffff}
</style>
</head>
Step 2: Wiring It All Up
So far, so good. Now here's the clever stuff! You need some more JavaScript to attach the autocomplete to your form.
But before you do that, you also need some more JavaScript to figure out what to do when an address has been entered. You need a new function which you'll pass to the control. This gets called when a street is selected. You can use this function to then populate your form:
<script>
var objFinder = new PCAInternationalAutoComplete("GBR", "ENG", document.getElementById("txtPostcode"), document.getElementById("txtStreet"), cb);
function cb()
{
//Do something with the address
}
</script>
Notice that we pass in the defaults for the country and language, along with the postcode and street controls.
Step 3: Dealing with the Response
Believe it or not, we're almost there! Our function "cb" gets called when the autocomplete control has been triggered. The control exposes a number of properties which can then be used to get at the data that's being entered. The properties available are:
| Street |
Street / road etc. |
| Locality |
Locality / district |
| City |
City or town name |
| State |
The state / province etc. |
For this demo, we'll drop the address parts into our text boxes to finish the autocompletion process:
<script>
var objFinder = new PCAInternationalAutoComplete("GBR", "ENG", document.getElementById("txtPostcode"), document.getElementById("txtStreet"), cb);
function cb()
{
document.getElementById("txtStreet").value = objFinder.Street;
document.getElementById("txtLocality").value = objFinder.Locality;
document.getElementById("txtCity").value = objFinder.City;
document.getElementById("txtState").value = objFinder.State;
}
</script>
<div id="divLabel"></div>
All Done!
That's it! And let's be honest, it wasn't really that hard was it?!
Customising
The best way to customise the form is to change the styles you copied into the HEAD tag at the start. Here's a description of what they mean:
| .autocomplete |
The container for the autocomplete box (which appears below the street field) |
| .autocomplete A |
The text inside the autocomplete box - the street name is in BOLD by default. |
| .autocomplete .item |
The box that holds each item in the autocomplete box. This is the style that's used by default. |
| .autocomplete .itemhover |
The box that holds each item in the autocomplete box when the moves moves over it, used for highlighting the item. |
| .autocomplete .lastitem |
The style used by the last item in the autocomplete box. |
Using CSS, there's loads of scope for make it look at home on your page. Why not play around, and if you have any questions, we're always here to help!
