UK Postcode & Address API for Developers

<!-- Add a div to house your 
     postcode input field -->
<div id="lookup_field"></div>

<!-- This is your existing form -->
<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">

<script>
// Add this after your form
$('#lookup_field').setupPostcodeLookup({
  // Add your API key
  api_key: 'ak_hk71kco54zGSgVf9ExxRVVNmolLNh',
  // Identify your fields with CSS selectors
  output_fields: {
    line_1: '#first_line',  
    line_2: '#second_line',         
    line_3: '#third_line',
    post_town: '#post_town',
    postcode: '#postcode'
  }
});
</script>

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