Configure
Address Finder exports a setup method to apply address verification to a form. setup requires the following configuration at minimum.
apiKey and outputFields below are all you need to get Address Finder working. For the complete set of controller options, see Configuration Reference.
API Key
apiKey
API Key from your Ideal Postcodes account. Typically begins ak_
Address Targets
outputFields
Specify where to send address data given a selected address. outputFields is an object which maps an address attribute to an input field. The input field can be identified by CSS or reference to the DOM element itself.
{
line_1: "#line_1",
line_2: "#line_2",
line_3: "input[name='line_3']",
post_town: document.getElementById("post_town"),
postcode: document.getElementById("postcode")
}
The fields above (line_1, line_2, line_3, post_town and postcode) are the minimum set needed to capture a complete, deliverable UK address. Collect all of them so the address you store reliably routes to the premises.
Assigning up to 3 address lines, post town and postcode fields, is all the addressing information required to identify a UK premises. You may extract more data for an address by passing more properties into the outputFields configuration object.
The configuration attributes for outputFields match the Address response object. For instance, street name can be populated using the thoroughfare attribute. A list of address attributes provided by the API can be found in our UK address data guide.
More complex, dynamic assignment can be performed using the onAddressRetrieved callback.
Output fields assigned with a query selector are evaluated lazily (i.e. when an address attribute needs to be piped to a field).
Country
A third, optional attribute to be aware of is country. Use country_iso or country_iso_2 to populate the 3 or 2 letter ISO code ("GBR" or "GB", for example). For the full country name on an input, use country, which yields a value like "United Kingdom".
Each of these targets can be an <input> or a <select>. When the target is a <select>, Address Finder resolves the matching <option> for you - it first matches on the option value, then falls back to the option's visible text - so no callback is needed. See Populate a country select for a worked example.
More information on addressing data can be found on our address data documentation.