Postcode Lookup

Quickly add address validation to the address entry forms on your website.

Basics

Our JavaScript library adds a Find button next to the postcode field on your address forms.

Click the Find button and the user is shown a list of addresses on that postcode. When they select an address, the details are used to fill out the other address fields on the form.

NOTE: We also have our PredictiveAddress service to provide an autocomplete user interface that also supports international addresses

Add our library to your page with one line of code:

<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/address_min.js"></script>

This script requires jQuery to already be loaded in your page.

Once you've included our library you can start adding Postcode Lookup buttons to your address forms:

new data8.postcodeLookupButton(
  [
    { element: 'address1', field: 'line1' },
    { element: 'address2', field: 'line2' },
    { element: 'address3', field: 'line3' },
    { element: 'city', field: 'town' },
    { element: 'county', field: 'county' },
    { element: 'postcode', field: 'postcode' }
  ],
  {
    // Change this to your own API Key
    ajaxKey: 'your-api-key',

    // Change this to your Postcode Lookup license type
    license: 'WebClickFull'
  }
).show();

This adds a Find button next to the postcode element, and puts the selected address into the elements address1, address2, address3, city, county and postcode

To use the sample code you'll need to get your own API Key from your dashboard.

Example

Try Postcode Lookup yourself in our form below.

Configuration

Get started with the most common configuration settings

There are two main parts to the configuration of this script - an array containing the list of elements in your form that should contain the address, and an object containing additional settings.

The form element that should contain the various parts of the address are listed in the array passed as the first parameter to the data8.postcodeLookupButton constructor as { element: 'id', field: 'name' } pairs. Add one of these for each element in your form that contains part of the address. The element should be set to the ID or name of the HTML element, and the field should be set to one of the following values:

Field	Meaning
`organisation`	The field should contain the company name, where available
`line1` - `line6`	The field should contain the corresponding line of the address
`town`	The field should contain the town name
`county`	The field should contain the county name
`postcode`	The field should contain the postcode
`country`	The field should contain the country name or code

You must specify an element for at least the line1 and postcode fields, and you can also include as many or as few of the other fields as you like.

Advanced Options

There are many more options to get finer control over how Postcode Lookup works

The full list of settings that can be supplied to the data8.postcodeLookupButton object is shown below.

General Options

You must specify values for all these options, or Postcode Lookup will not work.

Setting	Description	Default
`ajaxKey`	Your Data8 API Key - get this from your dashboard	`null`
`license`	The type of license you have for the Data8 Postcode Lookup service; check with your account manager if you are unsure	`null`

Formatting Options

Use these options to control how the Postcode Lookup user interface looks

Setting	Description	Default
`bootstrapUsed`	Set to `true` if you use Bootstrap. This will attempt to match your site's appearance and but the "Find" button at the end of the postcode field	`false`
`bootstrapButton`	If you have set `bootstrapUsed` to `true`, specifies the CSS class to be used for the "Find" button, e.g. `"btn-warning"`	`"btn-primary"`
`findLabel`	The text to use for the "Find" button next to the postcode field	`"Find"`
`okLabel`	The text to use for the "OK" button at the bottom of the address list	`"OK"`
`cancelLabel`	The text to use for the "Cancel" button at the bottom of the address list	`"Cancel"`
`expectedCountry`	The value that a country drop-down list must have before the "Find" button is shown	`null`

Address retrieval options

Setting	Description	Default
`includeNYB`	Set to `true` to include addresses from the Not Yet Built database (requires additional licensing)	`false`
`includeMR`	Set to `true` to include addresses from the Multiple Residency database (requires additional licensing)	`false`

Getting More Control

You can override many of the details of how the Postcode Lookup script works to take fine control

For full details, see the more detailed samples below.

International Forms

Show or hide the Find button when different countries are selected from a drop down list

Button and Dropdown Styling

Control the display of the "Find" and other buttons and dropdowns

Address Lookup Demo

Give it a try for yourself

Our Fuzzy logic means you can start at any point in the address such as the road name, misspelled or even try "four" instead of "4" as a house number!

Not sure what to type? Why not try:

This table shows the relative age and wealth of the local population compared to the country as a whole. A - F indicates the age (A being the youngest, F the oldest), and 1 - 4 indicates the wealth (1 being the wealthiest, 4 being the least wealthy).

	A	B	C	D	E	F
1
2
3
4

WHAT NEXT...

Like what you're seeing? Why not select one of the following options...

SPEAK TO THE TEAM SIGN UP FOR A FREE TRIAL ORGANISE A DEMO