Ideal Postcodes

Integrate Address Finder with Any Page in Moments

Add Address Autocompletion to any input field with our Address Finder Plugin

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" />

 1IdealPostcodes.AddressFinder.setup({
 2  apiKey: '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});

Demonstrations limited to 15 lookups per IP, per day

See more examples · Read the documentation

Or Integrate with Postcode Lookup

Add Postcode Lookups embedding and configuring our Postcode Lookup Plugin

Demo HTML JavaScript

 1<!-- Add a div to house your 
 2     postcode input field -->
 3<div id="lookup_field"></div>
 4
 5<!-- This is your existing form -->
 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" />

 1<script>
 2// Add this after your form
 3IdealPostcodes.PostcodeLookup.setup({
 4  // Add your API key
 5  apiKey: 'ak_htaapr1fkpQCzbA66WHfMRAIjotF5',
 6  // Identify a container for postcode lookup
 7  context: '#lookup_field',
 8  // Identify your fields with CSS selectors
 9  outputFields: {
10    line_1: '#first_line',  
11    line_2: '#second_line',         
12    line_3: '#third_line',
13    post_town: '#post_town',
14    postcode: '#postcode'
15  }
16});
17</script>