Skip to the content

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

Start a Free 30 Day Trial Today

Start a free trial today