Integration guide

This page shows how to add the Addressfinder auto-complete plugin to a custom address form.

The basic steps are:

1. Copy the javascript code
2. Update the javascript with your address field ID's
3. Paste the javascript into your form page and test

For countries other than Australia and New Zealand, see the integration guide for international addresses.

Step by step

1. Determine what type of addresses you want to be collecting on your page. By default we provide physical addresses from the GNAF database but you can choose to return postal addresses from the Australia Post PAF if this suits your business needs.
2. Determine what extra data (if any) you would like to collect along with each address. These may include Meshblock, GPS, DPID etc. See the full list
3. Copy the javascript code below.
4. Customise it for the fields in your page. This involves replacing the ADDRESSFINDER_DEMO_KEY with your license key and entering your search, address and metadata field ids into the appropriate areas of this javascript.
5. Once the key, search field and all input fields have been updated, copy the code and paste it close to the bottom of your webpage just above the closing </body> tag
6. Reload your page and give it a test. You should see suggestions returned nicely when you type address info into your search field. Select on one of the suggested addresses you should see all of your fields automatically populated with the correct address information.

Your generated code should look something like this. The fields that you need to update are indicated.

(function () {
  var widget, initAF = function () {
    widget = new AddressFinder.Widget(
      // Replace with the id of your search field
      document.getElementById('address_line_1'),
      // Replace with your license key
      'ADDRESSFINDER_DEMO_KEY',
      'AU',
      {
        "address_params": {
          "gnaf": "1"
        }
      }
    );
    widget.on('result:select', function (fullAddress, metaData) {
      // Replace each of these fields with your address field ids
      document.getElementById('addrs_1').value = metaData.address_line_1;
      document.getElementById('addrs_2').value = metaData.address_line_2;
      document.getElementById('suburb').value = metaData.locality_name;
      document.getElementById('state').value = metaData.state_territory;
      document.getElementById('postcode').value = metaData.postcode;
      document.getElementById('gps-metadata').value = metaData.longitude + ', ' + metaData.latitude;
      document.getElementById('meshblock-metadata').value = metaData.meshblock;
      document.getElementById('SA1').value = metaData.sa1_id;
    });
  };

  function downloadAF() {
    var script = document.createElement('script');
    script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
    script.async = true;
    script.onload = initAF;
    document.body.appendChild(script);
  };

  document.addEventListener('DOMContentLoaded', downloadAF);
})();

To find out the ID’s of each of your address fields, right click on each one and select ‘inspect’. The element will be highlighted. Copy the ID and paste these into the appropriate place within your generated code. Repeat for each address and metadata field.

To get a license key, sign up for a 30-day free trial.
Already have a subscription? Find your key in the Credentials section in the Portal.