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 a plain input field into an autocomplete AddressFinder 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 "locality", "state", "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

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

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 popup autocomplete window. 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

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 a first address and a second address using two widgets on the same page.

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

Location and Address Search

Using the AddressFinder Widget you can search for both addresses and locations (streets, suburbs, cities and states). This example demonstrates how the widget can be configured to include locations in the search results.

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.