SmartFreight® Addressing API
Our javascript library allows you to add an 'auto-complete' function to address fields on your website, giving users the ability to select their address and automatically populate the remaining fields.
Our library is stand-alone and does not require any other javascript libraries (for example we do not require JQuery, or AngularJS).
Before you begin: You must Register for a unique API Key. If you do not have an API Key Click here to register
The createAddressAutoComplete method
void smartfreight.createAddressAutoComplete(
DOMElement inputElement,
DOMString region,
DOMString lookupline,
DOMString apikey,
optional Function addressSelectedCallback
);
| Parameter | Type | Description |
|---|---|---|
| inputElement | DOMElement | The HTML input element which the user types in to activate the auto complete control. |
| region | DOMString | The region/country to filter the auto complete. Please see the FAQ for a list of valid regions. |
| lookupline | DOMString | The address line that the user is completing. Valid options include ( add1 | add3 | add4 | add5). See the FAQ for which fields are supported in various regions. |
| apikey | DOMString | Your unique API key obtained by registering on this website. If you have not registered; click here to register |
| addressSelectedCallback | optional Function | This function is called when the user selects an address from the list displayed. An object is returned will all lines of address included. This object can then be used to populate other fields within your web page. See the address object for details |
The address object parameter
| Parameter | Type | Description |
|---|---|---|
| name | DOMString | The business name at this address (where available) |
| add1 | DOMString | The first street line of the address |
| add2 | DOMString | The second street line of the address |
| add3 | DOMString | The Town/Suburb/City of the address (depending on region) |
| add4 | DOMString? | The State/County/Province of the address (depending on region) |
| add5 | DOMString? | The Postcode of the address (depending on region) |
| add6 | DOMString | The Country of the address (depending on region) |
| type | DOMString? | The type of address selected (DA: Delivery Area, PO: Post Office Box) (depending on region) |
Including the Auto Complete in your Web page
To enable the auto complete on an input element with in your web page follow these simple steps:
1) Include our javascript library in your html
<!-- Latest and minified JS -->
<script src="//api.ifsconnect.net/addressing/client-min-latest.js"></script>
2) On the onload event of the of the document, declare your some variables to reference your address fields.
3) Declare some variables for the contants.
4) Call the smartfreight.createAddressAutoComplete method to activate the auto complete on your selected input element.
// set the address fields to variables
var deliveryname = document.getElementById('deliveryname');
var addressline1 = document.getElementById('addressline1');
var addressline2 = document.getElementById('addressline2');
var addressline3 = document.getElementById('addressline3');
var addressline4 = document.getElementById('addressline4');
var addressline5 = document.getElementById('addressline5');
// Some constants
var region = 'UNITED KINGDOM';
var sfapikey = 'testing123';
// Create the auto complete
smartfreight.createAddressAutoComplete(addressline1, region, 'add1', sfapikey, function (e) {
if (e.name != '') deliveryname.value = e.name;
if (e.add1 != '') addressline1.value = e.add1;
if (e.add2 != '') addressline2.value = e.add2;
if (e.add3 != '') addressline3.value = e.add3;
if (e.add4 != '') addressline4.value = e.add4;
if (e.add5 != '') addressline5.value = e.add5;
});
Try it out
We have uploaded some samples to jsfiddle.net
Try the following examples:
| Location | Sample | Description |
|---|---|---|
| Australia | http://jsfiddle.net/smartfreight/cFAq9/ | Auto Complete the Suburb |
| Ireland | http://jsfiddle.net/smartfreight/sjk066s6/ | Trying typing in the town |
| New Zealand | http://jsfiddle.net/smartfreight/3sDU5/ | Trying typing in the town |
| South Africa | http://jsfiddle.net/smartfreight/9fmSx/ | Trying typing in the town |
| United Kingdom | http://jsfiddle.net/smartfreight/7TMc6/ | Try typing in address line 1 |
| United Kingdom | http://jsfiddle.net/smartfreight/zHsb5/ | Try typing in any address line. |
FAQ - Frequently Asked Questions
Posted on: 04/07/2017