Manual address entryGPS Location Manual Split Fields Street
Autocomplete only for street name, suburb and city/town. It also collects coordinates for the location. All other fields must be entered manually.
See the Pen Manual address entry by Addressfinder (@addressfinder) on CodePen.
Related code examples
Form without address line 2 - The example shows the basic use case of the AddressFinder widget but on a form that has fewer address fields. This form only has one "address line" so the widget has been modified to combine the 'Address_Line_1' and 'Address_Line_2' elements when populating the content into the appropriate field.#DOM #Logic #Split Fields #Street
Canadian checkout demo - Shows a simple checkout page, configured for capturing a Canadian address. The autocomplete widget provides the search capability and the selected address elements are populated into the relevant form fields.#International #Split Fields
Capturing Address Metadata - Demonstrates capturing several of our metadata attributes, and saving them into hidden fields on a form. In this example, we capture GPS coordinates, the meshblock ID, the NZ Post DPID field and also the name of the region. The example of the AddressFinder widget showcases some of the extra data that can be collected along side each Address. The addresses GPS location, meshblock ID and DPID are all collected in this example.#DPID #GPS #Meshblock #Metadata #Region
Disable widget via empty results message. - If no address is returned when searching, a message is displayed which allows the user to disable the widget and enter their address manually. "Click here to enter it manually".#Empty Content #Error Message #Manual
Manual address selector - Demonstrates how to enable/disable the autocomplete widget using a clickable link to "Enter manually".#Manual