Skip to main content

Configure

Postcode Lookup a setup method to apply address verification to a form. setup requires the following configuration at minimum.

API Key​

apiKey

API Key from your Ideal Postcodes account. Typically begins ak_

Postcode Lookup Container​

context

Specify an area on your page where Postcode Lookup can render the necessary user interface to allow Postcode Lookup. Typically a <div>, you may reference this using a CSS Selector or a direct reference to the node.

{
  context: "#context_id"
}

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")
}

Assigning up to 3 address lines, post town and postcode fields, is all addressing information required to identify a UK premise. You may extract more data for an address by passing more properties into the outputFields configuration object.

The configuration attributes for outputFields matches the Address response object. For instance, street name can be populated can be populated using the thoroughfare attribute. A list of address attributes provided by the API can be found at @ideal-postcodes/api-typings.

More complex, dynamic assignment can be performed using the OnAddressSelected callback.

Output fields assigned with a query selector are evaluated lazily (i.e. when an address attribute needs to be piped to a field).

More information on addressing data can be found on our address data documentation.