JavaScript widget code samples

You will find below the list of base configurations for the address autocomplete widget.

To learn more about how to set it up, read the integration guide.

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

Each option has a version of the widget for Australia, New Zealand, or both together.

Single line

Choose this option if you capture addresses in a single text field.

Australia

<script>
(function() {
    var widget, initAddressFinder = function() {
        widget = new AddressFinder.Widget(
            document.getElementById('address'),
            'ADDRESSFINDER_DEMO_KEY',
            'AU', {
                "address_params": {
                    "source": "gnaf,paf"
                }
            }
        );

        widget.on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.full_address
        });
    };

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

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>

New Zealand

<script>
(function() {
    var widget, initAddressFinder = function() {
        widget = new AddressFinder.Widget(
            document.getElementById('address'),
            'ADDRESSFINDER_DEMO_KEY',
            'NZ', {
                "address_params": {}
            }
        );

        widget.on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.a;
        });
    };

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

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>

Both countries

<script>
(function() {
    var addressField = document.getElementById('address'),
        countrySelect = document.getElementById('country'),
        AF_API_KEY = 'ADDRESSFINDER_DEMO_KEY',
        COUNTRY_NAME_NZ = 'New Zealand',
        COUNTRY_NAME_AU = 'Australia',
        widgets = {
            AU: null,
            NZ: null
        }

    /*
    * Determines which addresses are displayed to your user.
    * When either AU or NZ is selected we only display addresses from that country.

    * It is assumed that the country selector is a select element.
    * If you are using checkboxes or radio buttons, you will need to modify this code
    */
    function countryChangeHandler() {
        var countryName = countrySelect.options[countrySelect.selectedIndex].text;
        switch (countryName) {
            case COUNTRY_NAME_NZ:
                widgets.NZ.enable();
                widgets.AU.disable();
                break;
            case COUNTRY_NAME_AU:
                widgets.AU.enable();
                widgets.NZ.disable();
                break;
            default:
                widgets.NZ.disable();
                widgets.AU.disable();
        }
    }

    /*
     * Performs the following functions:
     * 1. initialises the AddressFinder widget for AU and NZ
     * 2. defines the event handler behaviour for when an address is selected
     * 3. Runs countryChangeHandler to set the inital country
     * 3. Setup of event listener for country changing
     */
    function initAddressFinder() {
        widgets['NZ'] = new AddressFinder.Widget(
            addressField,
            AF_API_KEY,
            'NZ', {
                "address_params": {}
            }
        );
        widgets['AU'] = new AddressFinder.Widget(
            addressField,
            AF_API_KEY,
            'AU', {
                "address_params": {
                    "source": "gnaf,paf"
                }
            }
        );

        widgets['NZ'].on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.a;
        });

        widgets['AU'].on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.full_address
        });

        countryChangeHandler()
        countrySelect.addEventListener('change', countryChangeHandler);
    }

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

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>

Multiple lines

Choose this option if you capture address elements separately (e.g. street, city, postcode, etc.).

Australia

<script>
(function() {
    var widget, initAddressFinder = function() {
        widget = new AddressFinder.Widget(
            document.getElementById('address'),
            'ADDRESSFINDER_DEMO_KEY',
            'AU', {
                "address_params": {
                    "source": "gnaf,paf"
                }
            }
        );

        // TODO - Update the ids in the javascript below to match those in your form.

        widget.on('address:select', function(fullAddress, metaData) {
            document.getElementById('address_line_1').value = metaData.address_line_1;
            document.getElementById('address_line_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;
        });
    };

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

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>

New Zealand

<script>
(function() {
    var widget, initAddressFinder = function() {
        widget = new AddressFinder.Widget(
            document.getElementById('address'),
            'ADDRESSFINDER_DEMO_KEY',
            'NZ', {
                "address_params": {}
            }
        );

        // TODO - Update the ids in the javascript below to match those in your form.

        widget.on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.address_line_1;
            document.getElementById('address_line_2').value = metaData.address_line_2 || '';
            document.getElementById('suburb').value = metaData.selected_suburb;
            document.getElementById('city').value = metaData.selected_city;
            document.getElementById('postcode').value = metaData.postcode;
        });
    };

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

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>

Both countries

<script>
(function() {
    var addressField = document.getElementById('address'),
        countrySelect = document.getElementById('country'),
        AF_API_KEY = 'ADDRESSFINDER_DEMO_KEY',
        COUNTRY_NAME_NZ = 'New Zealand',
        COUNTRY_NAME_AU = 'Australia',
        widgets = {
            AU: null,
            NZ: null
        }

    /*
    * Determines which addresses are displayed to your user.
    * When either AU or NZ is selected we only display addresses from that country.

    * It is assumed that the country selector is a select element.
    * If you are using checkboxes or radio buttons, you will need to modify this code
    */
    function countryChangeHandler() {
        var countryName = countrySelect.options[countrySelect.selectedIndex].text;
        switch (countryName) {
            case COUNTRY_NAME_NZ:
                widgets.NZ.enable();
                widgets.AU.disable();
                break;
            case COUNTRY_NAME_AU:
                widgets.AU.enable();
                widgets.NZ.disable();
                break;
            default:
                widgets.NZ.disable();
                widgets.AU.disable();
        }
    }

    /*
     * Performs the following functions:
     * 1. initialises the AddressFinder widget for AU and NZ
     * 2. defines the event handler behaviour for when an address is selected
     * 3. Runs countryChangeHandler to set the inital country
     * 3. Setup of event listener for country changing
     */
    function initAddressFinder() {
        widgets['NZ'] = new AddressFinder.Widget(
            addressField,
            AF_API_KEY,
            'NZ', {
                "address_params": {}
            }
        );
        widgets['AU'] = new AddressFinder.Widget(
            addressField,
            AF_API_KEY,
            'AU', {
                "address_params": {
                    "source": "gnaf,paf"
                }
            }
        );

        // TODO - Update the ids in the javascript below to match those in your form.

        widgets['NZ'].on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.address_line_1;
            document.getElementById('address_line_2').value = metaData.address_line_2 || '';
            document.getElementById('suburb').value = metaData.selected_suburb;
            document.getElementById('city').value = metaData.selected_city;
            document.getElementById('postcode').value = metaData.postcode;
        });

        widgets['AU'].on('address:select', function(fullAddress, metaData) {
            document.getElementById('address').value = metaData.address_line_1;
            document.getElementById('address_line_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;
        });

        countryChangeHandler()
        countrySelect.addEventListener('change', countryChangeHandler);
    }

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

    document.addEventListener('DOMContentLoaded', downloadAddressFinder);
})();
</script>