Loading...

JQuery - Find by Postcode

Add postcode lookup to any HTML form. Try it

HTML

<!-- Postcode field -->
<div id="postcode_lookup"></div>  
<!-- Add to your existing form --> <label>First Address Line</label> <input id="line1" type="text">
<label>Second Address Line</label> <input id="line2" type="text">
<label>Third Address Line</label> <input id="line3" type="text">
<label>Town</label> <input id="town" type="text">
<label>County</label> <input id="county" type="text">
<label>Postcode</label> <input id="postcode" type="text">

Javascript

<!-- Include JQuery v2+ -->
<script src="jquery.js"></script>
<!-- Include plugin file -->
<script src="https://cdn.getaddress.io/scripts/jquery.getAddress-4.0.0.min.js"></script>

<!-- Add after your form --> <script> $('#postcode_lookup').getAddress( { api_key: 'API Key', output_fields:{ line_1: '#line1', line_2: '#line2', line_3: '#line3', post_town: '#town', county: '#county', postcode: '#postcode' } }); </script>

Additional Output Fields

Property Description
latitude Latitudedinal coordinates +/-90.
longitude Longitudinal coordinates +/-180.
building_number The building's number.
building_name The building's name.
building_name_or_number The building's name or, if the name is not availible, the number.
sub_building_number The sub-building's number.
sub_building_name The sub-building's name.
sub_building_name_or_number The sub-building's name or, if the name is not availible, the number.
thoroughfare The street or road.

Callbacks

$('#postcode_lookup').getAddress(
    {
    api_key: 'API Key',  
    output_fields:
        {
        line_1: '#line1',
        line_2: '#line2',
        line_3: '#line3',
        post_town: '#town',
        county: '#county',
        postcode: '#postcode'
        },
    <!--  Optionally register callbacks at specific stages -->
onLookupSuccess: function(data){/* Your custom code */}, onLookupError: function(){/* Your custom code */}, onAddressSelected: function(elem,index){/* Your custom code */} }); });
Top