These examples are aimed at developers wanting to see how to configure the JavaScript Widget.

Hello World

This is the simplest example, and shows the JavaScript required to convert your address input field into an AddressFinder autocomplete field.

JS Example jQuery Version

Registration / Checkout Form

Shows how to integrate AddressFinder into a simple registration or checkout form. Uses a JavaScript event handler to populate individual form fields such as "suburb", "city", "postcode", etc. Also, watch the Integration Guide video.

JS Example jQuery Version

Registration / Checkout Form with hidden fields

This second registration form example shows a single line address form, where the results are captured within hidden fields. This is a good demonstration of some of the Best Practice Guidelines.

JS Example jQuery Version

Putting branches on the map

Use AddressFinder to geocode an address, and then plot it on a map amongst your stores.

JS Example

Modifying search parameters

The widget offers the same level of customisation that the Address Autocomplete API and Location Autocomplete API provide. This example shows how to exclude PO Boxes from the result set.

Exclude PO Boxes NZ Post addresses only

Event Listeners

The AddressFinder plugin fires a number of events that you can use to provide advanced functionality. This example demonstrates how to consume the result:select event, and displays a popup showing the address that the user selected. More information about using event listeners is available in the Advanced Usage selection of the documentation.

JS Example

Rural Addresses

Use this indicator to determine if the address is likely to be considered rural by a courier company.

JS Example

Custom Styles

It is possible to change the default styles that AddressFinder uses. This example demonstrates altering the size and colours of the addresses that get displayed by AddressFinder. More information about using your own styles is available in the Advanced Usage selection of the documentation.

JS Example

Use with a scrolling panel

If you have a fixed panel with scrolling within your webpage, you may have issues with the positioning of the autocomplete results dropdown. If so, this example will show you have to adjust the widget to render the popup using the container option.

JS Example

Third Party data

AddressFinder allows developers to include their own data sets with the standard addresses and locations that our API returns. You example, you may choose to include some of your own branches in the list of results that are displayed. More information about using your own data is available in the Advanced Usage selection of the documentation.

This example demonstrates the inclusion of a some additional address in the results.

JS Example

Regional filtering of addresses

You may have a website that needs to capture addresses within a certain locality only. For example, you may be providing a service that only needs Auckland based addresses. If this is the case, then the regional filtering may be of benefit. You can choose to only return addresses and locations (streets, suburbs, cities, etc) for a named region. These regions are defined by their regional council.

This example shows the capture of Auckland only addresses. You can alter the defined region code for any of the 17 regions (including Chatham Islands).

JS Example

Multiple AddressFinder widgets on a single page

You can include any number of AddressFinder widgets on a single web page. For example, you may wish to capture a delivery address and billing address separately. You can use different criteria for each widget.

This example demonstrates capturing an Auckland based address (using region filtering), and a separate Wellington based address.

JS Example

Disable and re-enable the widget

Sometimes you want to disable the AddressFinder widget - for example, perhaps you want the user to enter their address in a manual mode. This example demonstrates calling the disable() and enable() methods to turn the AddressFinder widget on and off.

JS Example

Multiple countries in one form

Create a widget per country (AU & NZ), and dynamically enable the appropriate widget based on the selected country.

JS Example

Further examples

We also have some more detailed examples.