Auto Complete (With PAF)

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. This version will even automatically switch over to the Royal Mail's Postcode Address File data when doing UK lookups.

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):

<style>
       .autocomplete {border-bottom:solid 1px #aaaaaa; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background-color:#fafafa; width:602px}
       .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>

<script src="http://services.postcodeanywhere.co.uk/javascript/internationalautocomplete.aspx?account_code=aaaaa11111&license_key=aa11-aa11-aa11-aa11&version=2"></script>

Make sure the page has a country list with ISO3 country values and add an "onchange" event to it e.g.

<select id="ddlCountry" onchange="objFinder.Country=this.value">
       <option value="GBR" selected>United Kingdom</option>
       <option value="USA">United States of America</option>                                
       <option value="AND">Andorra</option>
       <option value="AUS">Australia</option>
       <option value="AUT">Austria</option>
       ...
</select>

Step 2: Wiring It Up

So far, so good. Now here's the clever stuff! You need some more JavaScript to convert that boring old DIV into a very exciting international address capture thingy!

But before you do that, you also need some more JavaScript to figure out what address has been entered. You need a new function which you'll pass to the form. This gets called each time the address is altered (e.g. key pressed, autocomplete invoked etc). You can use this function to get the address details from the SmartForm™ and store it elsewhere:

<script>
       var objFinder = new PCAInternationalAutoComplete("GBR", "ENG", document.getElementById("txtPostcode"), document.getElementById("txtLine1"), cb);
       objFinder.UseRoyalMailPremiseData = true;
                
       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. You’ll want to pass the selection from your country drop-down in instead.

Step 4: Dealing with the Response

Believe it or not, we're almost there! Our callback function "cb" gets called when the address changes so we can do something with it. The form exposes a number of properties which can then be used to get at the data that's being entered. The properties available are:

For this demo, we'll use the returned address details to populate the elements of our address form:

<script language="javascript">
            
       var objFinder = new PCAInternationalAutoComplete("GBR", "ENG", document.getElementById("txtPostcode"), document.getElementById("txtLine1"), cb);
       objFinder.UseRoyalMailPremiseData = true;
                
       function cb()
       {
              document.getElementById("txtLine1").value = objFinder.Line1;
              document.getElementById("txtLine2").value = objFinder.Line2;
              document.getElementById("txtCity").value = objFinder.City;
              document.getElementById("txtState").value = objFinder.State;
              document.getElementById("txtPostcode").value = document.getElementById("txtPostcode").value.toUpperCase();
       }

</script>

All Done!

That's it! And let's be honest, it's really not that hard is 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:

Using CSS, there's loads of scope for make it look at home on your page. Play around and if you have any questions, we're always here to help!