International Address Autocomplete Widget options
The javascript widget is able to be configured to suit a number of needs. The list below contains descriptions and code snippets some of the more popular code configurations.
To apply any of the configurations below, insert the associated code snippet into the full Address autocomplete code snippet provided in the integration guide.
Country select options
The widget can be configured to search addresses from specified countries. The first step to doing this is to specify, in the widget code, the primary country (defaultCountryCode) the users are likely to be searching.
The options include: Belgium BE, Canada CA, Czechia CZ, France FR, Germany DE, Ireland IE, Netherlands NL, New Zealand NZ, Portugal PT, Singapore SG, Spain ES, Sweden SE, United Kingdom GB, United States US as well as Australia AU and New Zealand NZ.
defaultCountryCode: "GB",
The second step is to specify, in the widget code, the ID of the country select field in which customers chose their desired country. We recommend having this country select field to be located above the address fields so that users choose the country prior to searching for their address.
countrySelector: "#country",
View an example of this on CodePen
Max address results
The widget can be configured to return a specified number of addresses in the autocomplete results list. This option is an address param.
countryConfig: {
DEFAULT: {
widgetOptions: {
address_params: {
max: 7
}}}},
View an example of this on CodePen
Returning GPS coordinates
The service can be configured, via the widget, to return and populate the GPS coordinates of the selected address. To enable this, include the address metadata parameter gps: 1 in the widget code. Also, define the field where you wish to collect the GPS coordinates.
countryConfig: {
DEFAULT: {
widgetOptions: {
address_params: {},
address_metadata_params: { gps: 1 }
}
}
},
View an example of this on CodePen
Populating a State / Region select field
The widget can be configured to populate a State select field with the State (State, Region, Provence, Country etc) of the selected address. For some countries, such as the USA, Canada and Australia, the correct option will be updated on selection without any javascript customisations. See an example of a State field being populated when an address from the USA is selected.
For countries such as Ireland, Spain and New Zealand, you will need to map the state values of your form to the related values returned from Addressfinder. See this example showing the Javascript code configured for state mapping.