Autocomplete Demonstration

Address autocomplete in few lines of javascript and CSS


<input id="input" type="text" placeholder="Search for an address with autocomplete" />
<!-- Create an input field to attach autocomplete -->

<!-- Below are your existing input fields -->
<label>Address Line One</label> 
<input id="first_line" type="text">

<label>Address Line Two</label>
<input id="second_line" type="text">

<label>Address Line Three</label>
<input id="third_line" type="text">

<label>Post Town</label>
<input id="post_town" type="text">

<label>Postcode</label>
<input id="postcode" type="text">
var controller = new IdealPostcodes.Autocomplete.Controller({
  api_key: "iddqd",
  inputField: "#input",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode"
  }
});

Getting started

You can attach address autocomplete to any input field.

To get started, create an autocomplete controller instance with a configuration object.

Point this controller to the intended input field as well as the fields you wish to pipe your selected addresses to.


Play with this example

new IdealPostcodes.Autocomplete.Controller({
  api_key: "iddqd",
  inputField: "#input",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode"
  }
});
<input id="input" />

<label>Address Line One</label> 
<input id="first_line" type="text">

<label>Address Line Two</label>
<input id="second_line" type="text">

<label>Address Line Three</label>
<input id="third_line" type="text">

<label>Post Town</label>
<input id="post_town" type="text">

<label>Postcode</label>
<input id="postcode" type="text">

Attaching autocomplete to an existing address field

You can also attach multiple autocomplete instances to pre-existing address fields.

Each autocomplete instance is isolated and can be configured individually.


Play with this example

new IdealPostcodes.Autocomplete.Controller({
  api_key: "iddqd",
  inputField: "#input",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode"
  }
});

new IdealPostcodes.Autocomplete.Controller({
  api_key: "iddqd",
  inputField: "#input",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode"
  }
});
<input id="input" />
<!-- Create an input field to attach autocomplete -->

<!-- Below are your existing input fields -->
<label>Address Line One</label> 
<input id="first_line" type="text">

<label>Address Line Two</label>
<input id="second_line" type="text">

<label>Address Line Three</label>
<input id="third_line" type="text">

<label>Post Town</label>
<input id="post_town" type="text">

<label>Postcode</label>
<input id="postcode" type="text">

Pulling in additional data

We can also pull in more data from the Postcode Address File by passing more arguments into the outputFields object.

In this instance, we pull location, organisation name (if any) and the Unique Delivery Point Reference Number.


Play with this example

new IdealPostcodes.Autocomplete.Controller({
  api_key: "iddqd",
  inputField: "#input",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode",
    organisation_name: '#organisation_name',
    longitude: '#longitude',
    latitude: '#latitude',
    udprn: '#udprn'
  }
});
<input id="input" type="text">

<label>Organisation Name</label>
<input id="organisation_name" type="text">
<label>Longitude</label>
<input id="longitude" type="text">
<label>Latitude</label>
<input id="latitude" type="text">
<label>Unique Delivery Point Reference Number</label>
<input id="udprn" type="text">
    
    
<label>Address Line One</label>
<input id="first_line" type="text">
<label>Address Line Two</label>
<input id="second_line" type="text">
<label>Address Line Three</label>
<input id="third_line" type="text">
<label>Post Town</label>
<input id="post_town" type="text">
<label>Postcode</label>
<input id="postcode" type="text">

Checking the usability of your key

For some applications, you may expect your key to not be usable in certain situations. For instance,

  • You may not have balance on your key
  • You've set a daily lookup limit
  • Your user may have exceeded their daily limit set by you

You can instruct the plugin to make provisions in case your key can't be used.

By setting checkKey to true the plugin will check if the key is usable when it is loaded on a page. If the check fails, the plugin will not initialise.

You can also use the onLoaded and onFailedCheck callbacks to make further changes to your page depending on whether your key can be used.


Play with this example

new IdealPostcodes.Autocomplete.Controller({
  // Test key: "iddqd" passes the check
  api_key: 'iddqd',
  
  // Test key: "idkfa" fails the key check
  // api_key: 'idkfa',

  checkKey: true, 

  // Invoked if plugin loads
  onLoaded: function () {
    document.querySelector("#message")[0].innerHTML = "Try using our test postcode: ID1 1QD";
  },
  
  // Invoked if key fails check
  onFailedCheck: function () {
    document.querySelector("#message")[0].innerHTML = "Please manually enter your address";
  },

  inputField: "#input",
  outputFields: {
    line_1: "#first_line",
    line_2: "#second_line",
    line_3: "#third_line",
    post_town: "#post_town",
    postcode: "#postcode"
  }
});
<p id="message"></p>

<input id="input" type="text">

<label>Address Line One</label> 
<input id="first_line" type="text">

<label>Address Line Two</label>
<input id="second_line" type="text"> 

<label>Address Line Three</label>
<input id="third_line" type="text">

<label>Post Town</label>
<input id="post_town" type="text">

<label>Postcode</label>
<input id="postcode" type="text">
   

Need help? If you have any questions or need help debugging, come talk to us