Google maps like auto-complete or auto-suggest API for postal addresses

Question

Hi,

I'm part of a project that requires auto-complete or auto-suggest feature for postal addresses (something similar to what google maps has). As the user starts to type in the number and then the street google starts to suggest valid options. I would like to know if there is an api (even commercial) available in the market.

Note: I'm not looking for an address validation API.

I could also buy a address database and implement this on top of it. But thats a lot of Dev overhead involved if we need to build something robust and sophisticated. Any good pointers will help.

Thanks Bala

Answer 1

This looks to give you a solution similar to the one you are searching for. If you replace the on_click event with the Javascript onkeyup you should then be able to check the address realtime.

This is a quick step-by-step integration guide describing how to add a RapidAddress postcode based address finder to a HTML website. We recommend you read the JavaScript user guide first. Step #1 Download the latest version of the JavaScript class from the downloads section. You could also use the integration pack, it contains ready made HTML pages that may be handy as a starting point. Upload the JavaScript file crafty_postcode.class.js to your webserver and reference it in your HTML, you may have to use relative or absolute paths in the src property:

<script type="text/javascript" charset="ISO-8859-1" src="crafty_postcode.class.js">
</script>

NOTE: the "ISO-8859-1" bit is important as the JS script is compressed. Step #2 Create and configure the JavaScript object:

<script>
    var cp_obj = CraftyPostcodeCreate();
    cp_obj.set("access_token", "xxxxx-xxxxx-xxxxx-xxxxx"); // your token here
    cp_obj.set("result_elem_id", "crafty_postcode_result_display");
    cp_obj.set("form", "address");
    cp_obj.set("elem_company"  , "companyname");
    cp_obj.set("elem_street1"  , "address1");
    cp_obj.set("elem_street2"  , "address2");
    cp_obj.set("elem_street3"  , "address3");
    cp_obj.set("elem_town"     , "town");
    cp_obj.set("elem_county"   , "county");
    cp_obj.set("elem_postcode" , "postcode");
</script>

Step #3 Create an address form in HTML:

<form method="post" name="address"> 
 Postcode:<br/>
 <input type="text" name="postcode"/>&nbsp;&nbsp;&nbsp;
 <button type="button" onclick="cp_obj.doLookup()">Find Address</button><br/>
 <span id="crafty_postcode_result_display">&nbsp;</span><br/>
 Company:<br/>
 <input type="text" name="companyname"/><br/>
 Address:<br/>
 <input type="text" name="address1"/><br/>
 <input type="text" name="address2"/><br/>
 <input type="text" name="address3"/><br/>
 Town:<br/>
 <input type="text" name="town"/><br/>
 County:<br/>
 <input type="text" name="county"/>
</form>

NOTE: "companyname", "address2/3" and "county" are optional, you can leave these fields out if it suits your site. Remember to delete also them from the JavaScript config in step 2. For example if you do not want the county field : cp_obj.set("elem_county", ""); Note the 'Find Address' button, the onclick action calls the doLookup() method. The address results (or an error message) will be placed in the element with id="crafty_postcode_result_display". All done! If things don't work for any reason, email any error codes/messages to us. We will be happy to help. You may also want to read the JavaScript user guide, if you haven't already.

As found at:

http://www.craftyclicks.co.uk/web-service/docs/javascript-address-finder-how-to-add-rapidaddress

Answer 2

You can use googles geo autocomplete api

http://code.google.com/p/geo-autocomplete/

This will give you the same auto-complete for locations that you would get on googlemaps.