Open Nav

Autocomplete Integration Examples


Integrate or adapt our HTML & JavaScript snippets below to get started in moments

Address Autocomplete Integration with Minimal Code


Quickly add address autocomplete to any field with our open sourced autocomplete library

Demo HTML JavaScript 
 1<input id="input" type="text" 
 2  placeholder="Search for an address with autocomplete" />
 3<!-- Create an input field to attach autocomplete -->
 4
 5<!-- Below are your existing input fields -->
 6<label>Address Line One</label> 
 7<input id="first_line" type="text" />
 8
 9<label>Address Line Two</label>
10<input id="second_line" type="text" />
11
12<label>Address Line Three</label>
13<input id="third_line" type="text" />
14
15<label>Post Town</label>
16<input id="post_town" type="text" />
17
18<label>Postcode</label>
19<input id="postcode" type="text" />

 1var controller = new IdealPostcodes.Autocomplete.Controller({
 2  api_key: "iddqd",
 3  inputField: "#input",
 4  outputFields: {
 5    line_1: "#first_line",
 6    line_2: "#second_line",
 7    line_3: "#third_line",
 8    post_town: "#post_town",
 9    postcode: "#postcode"
10  }
11});

Getting started

  • 1. Download the minified JavaScript and CSS files
  • 2. Include the JavaScript and CSS on page with a form
  • 3. Instantiate the autocomplete client with your address fields
github

Download, read or fork the Autocomplete library on GitHub

documentation

Read our Autocomplete documentation for more information

Simple integration

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.


See Example

 1new IdealPostcodes.Autocomplete.Controller({
 2  api_key: "iddqd",
 3  inputField: "#input",
 4  outputFields: {
 5    line_1: "#first_line",
 6    line_2: "#second_line",
 7    line_3: "#third_line",
 8    post_town: "#post_town",
 9    postcode: "#postcode"
10  }
11});
 1<input id="input" />
 2
 3<label>Address Line One</label> 
 4<input id="first_line" type="text">
 5
 6<label>Address Line Two</label>
 7<input id="second_line" type="text">
 8
 9<label>Address Line Three</label>
10<input id="third_line" type="text">
11
12<label>Post Town</label>
13<input id="post_town" type="text">
14
15<label>Postcode</label>
16<input id="postcode" type="text">

Attach multiple autocomplete instances

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

Each autocomplete instance is isolated and can be configured individually.


See Example

 1new IdealPostcodes.Autocomplete.Controller({
 2  api_key: "iddqd",
 3  inputField: "#input",
 4  outputFields: {
 5    line_1: "#first_line",
 6    line_2: "#second_line",
 7    line_3: "#third_line",
 8    post_town: "#post_town",
 9    postcode: "#postcode"
10  }
11});
12
13new IdealPostcodes.Autocomplete.Controller({
14  api_key: "iddqd",
15  inputField: "#input",
16  outputFields: {
17    line_1: "#first_line",
18    line_2: "#second_line",
19    line_3: "#third_line",
20    post_town: "#post_town",
21    postcode: "#postcode"
22  }
23});

 1<input id="input" />
 2<!-- Create an input field to attach autocomplete -->
 3
 4<!-- Below are your existing input fields -->
 5<label>Address Line One</label> 
 6<input id="first_line" type="text">
 7
 8<label>Address Line Two</label>
 9<input id="second_line" type="text">
10
11<label>Address Line Three</label>
12<input id="third_line" type="text">
13
14<label>Post Town</label>
15<input id="post_town" type="text">
16
17<label>Postcode</label>
18<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.


See Example

 1new IdealPostcodes.Autocomplete.Controller({
 2  api_key: "iddqd",
 3  inputField: "#input",
 4  outputFields: {
 5    line_1: "#first_line",
 6    line_2: "#second_line",
 7    line_3: "#third_line",
 8    post_town: "#post_town",
 9    postcode: "#postcode",
10    organisation_name: '#organisation_name',
11    longitude: '#longitude',
12    latitude: '#latitude',
13    udprn: '#udprn'
14  }
15});

 1<input id="input" type="text">
 2
 3<label>Organisation Name</label>
 4<input id="organisation_name" type="text">
 5<label>Longitude</label>
 6<input id="longitude" type="text">
 7<label>Latitude</label>
 8<input id="latitude" type="text">
 9<label>Unique Delivery Point Reference Number</label>
10<input id="udprn" type="text">
11    
12    
13<label>Address Line One</label>
14<input id="first_line" type="text">
15<label>Address Line Two</label>
16<input id="second_line" type="text">
17<label>Address Line Three</label>
18<input id="third_line" type="text">
19<label>Post Town</label>
20<input id="post_town" type="text">
21<label>Postcode</label>
22<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.


See Example

 1new IdealPostcodes.Autocomplete.Controller({
 2  // Test key: "iddqd" passes the check
 3  api_key: 'iddqd',
 4  
 5  // Test key: "idkfa" fails the key check
 6  // api_key: 'idkfa',
 7
 8  checkKey: true, 
 9
10  // Invoked if plugin loads
11  onLoaded: function () {
12    document.querySelector("#message")[0].innerHTML = "Try using our test postcode: ID1 1QD";
13  },
14  
15  // Invoked if key fails check
16  onFailedCheck: function () {
17    document.querySelector("#message")[0].innerHTML = "Please manually enter your address";
18  },
19
20  inputField: "#input",
21  outputFields: {
22    line_1: "#first_line",
23    line_2: "#second_line",
24    line_3: "#third_line",
25    post_town: "#post_town",
26    postcode: "#postcode"
27  }
28});

 1<p id="message"></p>
 2
 3<input id="input" type="text">
 4
 5<label>Address Line One</label> 
 6<input id="first_line" type="text">
 7
 8<label>Address Line Two</label>
 9<input id="second_line" type="text"> 
10
11<label>Address Line Three</label>
12<input id="third_line" type="text">
13
14<label>Post Town</label>
15<input id="post_town" type="text">
16
17<label>Postcode</label>
18<input id="postcode" type="text">
19

Write out the entire address in a single field

Instead of writing address attributes to specific input fields, you can also write out the entire address to a general input like a textarea.

This is achieved by using the onAddressRetrieved callback.

When an address is selected and pulled from the API, combine the address fields and write it to an input field.

See Example

 1new IdealPostcodes.Autocomplete.Controller({
 2  api_key: "iddqd",
 3  inputField: "#input",
 4  outputFields: {},
 5  onAddressRetrieved: address => {
 6    const result = [
 7      address.line_1,
 8      address.line_2,
 9      address.line_3,
10      address.post_town,
11      address.postcode,
12    ].filter(elem => elem !== "")
13    .join("\n");
14    $("#output_field").html(result);
15  }
16});

1<input id="input" type="text" placeholder="Search for an Address"/>
2<br />
3<label>Address</label>
4<textarea id="output_field" type="text"></textarea>
contact us

Need help?

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