- Hello World
- Registration / Checkout Form
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.
- 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:selectevent, 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.
- 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.
- 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.
- 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.
- 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.
- 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
enable()methods to turn the AddressFinder widget on and off.
- 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.
- Multiple countries in one form
- Create a widget per country (AU & NZ), and dynamically enable the appropriate widget based on the selected country.
- Further examples
We also have some more detailed examples.