Addressfinder

The best way to find exact addresses in New Zealand

  • Skip to Main Navigation
  • Skip to Footer Sitemap
  • Skip to Top
  • About
    • About Us
    • Case Studies
    • FAQ
    • Partners
    • Blog
    • Contact Us
  • Pricing
  • Industries
    • E-commerce
      Collect verified delivery addresses
    • Finance
      Verified address data for KYC and AML
    • Utilities
      Make network connections faster
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Email Verification
      Collect only valid email addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Address Metadata
      Get extra data about addresses
    • MORE FEATURES
  • Address Verification
    • Integration Guide
    • Code Examples
    • API Reference
    • Code Generator
    • Javascript Reference
    • International Integration
  • Email Verification
    • Integration Guide
    • Code Examples
    • API Reference
  • About
    • About us
    • Case Studies
    • Frequently Asked Questions
    • Partners
    • Blog
    • Contact Us
  • Pricing
  • Industries
    • E-commerce
      Collect verified delivery addresses
    • Finance
      Verified address data for KYC and AML
    • Utilities
      Make network connections faster
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Email Verification
      Collect only valid email addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Address Metadata
      Get extra data about addresses
    • MORE FEATURES
  • Documentation
    • Integrations
      • Magento
      • WooCommerce
      • Hubspot
      • Salesforce
      • Shopify Plus
      See all integrations
    • Address Verification
      • Integration Guide
      • Code Examples
      • API Reference
      • Code Generator
      • Javascript Reference
      • International Integration
    • Email Verification
      • Integration Guide
      • Code Examples
      • API Reference
  • Login

Enabling International Address Autocomplete with the common address plugin

About the common address plugin

The common address plugin includes additional functionality for the support of searching for addresses from both Australia and New Zealand, as well as all of the additional countries supported by the International Autocomplete API.

Overview

This page shows how to add the common address plugin to an address form.

The basic steps are:

  1. Identify the identifiers of each of the address form elements
  2. Paste the provided configuration script into your webpage
  3. Adjust the configuration to match your form elements

Identify the element ID values

You should have an existing address form. It should already be working well - just with manual address entry. We will enhance this form to enable address autocompletion from different countries.

Address line ID code inspection screenshot

Here is an example of a simple form that contains address elements. We will attach the plugin to the street address field. The plugin will need to monitor the country field, and use this to decide which results to display to the end user.

When the user selects an address, we will populate the remaining address elements with the indivual address elements. Write down each field ID name like the table below:

Field label Element ID
Street address address
Suburb suburb
City city
State/Region state
Postal code postcode
Country (optional) country

If you do not have ID values assigned to the form elements, you can also use CSS selectors to identify the elements. For example, you might identify the city element using selectors such as input[name=city].

  
<script>
(function (d) {
  // ************************************************** 
  // Addressfinder settings
  // **************************************************

  // STEP BY STEP integration instructions here:
  // https://addressfinder.com.au/docs/plugins/common-address/
  
  var conf = {
    // STEP 1: paste in your licence key
    licenceKey: "ADDRESSFINDER_DEMO_KEY",

    defaultCountryCode: "NZ",

    // STEP 2 - update the property selectors using the ID attributes of your form fields
    addressSelector: "#address",
    suburbSelector: "#suburb",
    citySelector: "#city",
    stateSelector: "#state",
    postcodeSelector: "#postcode",
    countrySelector: "#country",

    // STEP 3 (optional): customise the addresses returned by updating the address_params values
    // Examples at: https://addressfinder.nz/docs/widget_code_generator/
    widgetOptions: {
      AU: {
        address_params: {
          gnaf: 1
        }
      },
      NZ: {
        address_params: {}
      },
      INT: {
        address_params: {}
      }
    },

    // STEP 4: once the plugin is working, you can set debugMode to false
    debugMode: true
  };

  d.addEventListener("DOMContentLoaded",function(){if(d.querySelector(conf.addressSelector)){var e=d.createElement("script");e.src="https://api.addressfinder.io/assets/generic/v1/address.js",e.async=!0,e.onload=function(){new Addressfinder.Address.BootHandler(conf)},d.body.appendChild(e)}});
})(document);
</script>
  

Paste the provided configuration script

You should paste the configuration script into the source code of your webpage. We suggest that you include it at the bottom of the page.

Adjust the configuration

You should now set each of the ID values in the script. Notice that the ID values have a # prefix which needs to be retained. If you are using a CSS selector, then this is not necessary.

Next, update the licenceKey value to use your key. You can obtain this value from the credentials link in the Portal sidebar.

The defaultCountryCode is set to NZ which is probably suitable.

Advanced settings

You may choose to adjust the datasets and other filters applied by the plugin. These settings are passed as address_params for each of the countries. You can see the possible options for each of these at the following links:

  • Australian address params
  • New Zealand address params
  • International address params

You can find examples of different configuration options on the Code Examples page.

Testing the plugin

By default, the plugin is set to have debugMode enabled. With this set, the plugin will report on any problems that it encounters. These messages are sent to the Javascript console.

After you have published your changes, you should see the autocomplete activating when you type into the address field. Make sure that you have selected a country first.

Troubleshooting

If you still have the debugMode enabled, then you can view error messages within your browser's Javascript console.

The most likely problem is a mis-configuration of the field IDs. The code above will give you a useful error message if it is unable to find the correct field.

If this happens, you should double-check the values you wrote down in the table above. Have these values been copied into the code correctly? Is the required # prefix included?

Still having trouble? Send us an email at support@addressfinder.nz, and we will have a look. Be sure to include the URL of the page, so we can debug the problem.

Next steps

Get Started

  • Address Verification Widget
    • Integration guide
    • Widget code generator
    • Code examples
    • Best practices
    • Fixing browser quirks
    • Advanced usage
    • Can't find your address?
    • JavaScript widget reference
  • Email Verification
    • Email Verification API
    • Widget integration guide
    • Widget advanced usage
  • API Documentation (NZ)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Address Reverse Geocode
    • Location Autocomplete
    • Location Metadata
    • Points of Interest Autocomplete
    • Points of Interest Metadata
    • API Errors
  • API Documentation (AU)
    • Address Autocomplete
    • Address Metadata
    • Address Verification
    • Location Autocomplete
    • Location Metadata
    • API Errors
  • API Documentation (INT'L)
    • Address Autocomplete
    • Address Metadata
  • Integrations
    • Magento
    • WooCommerce
    • BigCommerce
    • Salesforce
    • Shopify Plus
    • Hubspot
    • StoreConnect
    • Spiffy Stores
    • Ruby
    • iOS
    • Drupal
    • Microsoft Dynamics 365
    • Vue
    • Gravity Forms
    • React
Addressfinder logo
Addressfinder provides speedy, accurate and dependable address autocompletion at a fair price. Easily integrate our address finder software with your site to start enjoying our address verification, address autocomplete and other address services today.

Sitemap

  • About
  • About Us
  • Contact
  • Blog
  • FAQ
  • Pricing
  • Case Studies
  • Status Page
  • Privacy Policy
  • Terms & Conditions
  • Features
  • Address Autocomplete
  • Address Metadata
  • Bulk Address Cleansing
  • Address Geocoding
  • Email Address Verification
  • Reverse Address Lookup
  • Points of Interest
  • Street, Suburb & City Search
  • Postcode Finder
  • Address Verification
  • Integrations
  • WooCommerce
  • BigCommerce
  • Shopify Plus
  • Magento
  • Salesforce
  • Spiffy Stores
  • iOS
  • Ruby
  • HubSpot
  • StoreConnect
  • Drupal
  • Microsoft Dynamics 365
  • Vue
  • Gravity Forms
  • React
  • API Documentation
  • Address Autocomplete
  • Address Metadata
  • Address Verification
  • Email Verification
  • API Errors
  • AU APIs specs
  • International APIs
  • Widget Documentation
  • Integration Guide
  • Code Generator
  • Code Examples
  • Javascript Reference
  • International Integration Guide
  • Email Integration Guide
Addressfinder is also available in Australia
Terms and Conditions | Privacy
Copyright © 2023 Addressfinder, New Zealand