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 */}
});
});

Domain Tokens

To avoid exposing your API key in browser code, Domain Tokens can used in place of your API key.
Domain Tokens can be generated for a specific domain and it's sub-domains. They can also limit the number of look-ups per minute for an IP address. 

<script>
    $('#postcode_lookup').getAddress(
        {
        api_key: 'dtoken_hEDzcyiWMI1eXXXX',  
        output_fields:{
            line_1: '#line1',
            line_2: '#line2',
            line_3: '#line3',
            post_town: '#town',
            county: '#county',
            postcode: '#postcode'
        }
    });
</script>
Top