Loading...

JavaScript - Find by postcode

Add postcode lookup to any HTML form. Try it

Install from NPM or CDN

npm install getaddress-find

<script src="https://cdn.getaddress.io/scripts/getaddress-find-2.1.0.min.js"></script>

HTML

<!-- container -->
<div id="postcode_lookup"></div>  

<!-- Add to your existing form -->
<label>First Address Line</label>
<input id="formatted_address_0" type="text"> 

<label>Second Address Line</label>
<input id="formatted_address_1" type="text">   

<label>Third Address Line</label>
<input id="formatted_address_2" type="text">  

<label>Town</label>
<input id="formatted_address_3" type="text">

<label>County</label>
<input id="formatted_address_4" type="text">

<label>Postcode</label>
<input id="postcode" type="text">

<script>
    getAddress.find(
        'postcode_lookup',
        'API Key or Domain Token'
    );
</script>

Events

document.addEventListener("getaddress-find-suggestions", function(e){
    console.log(e.suggestions);
})

document.addEventListener("getaddress-find-suggestions-failed", function(e){
    console.log(e.status);
    console.log(e.message);
})

document.addEventListener("getaddress-find-address-selected", function(e){
    console.log(e.address);
})

document.addEventListener("getaddress-find-address-selected-failed", function(e){
    console.log(e.status);
    console.log(e.message);
})

Options

getAddress.find(
        'postcode_lookup',
        'API Key',
        /*options*/{
          output_fields:{
                formatted_address_0:'formatted_address_0',  /* The id of the element bound to 'formatted_address[0]' */
                formatted_address_1:'formatted_address_1',  /* The id of the element bound to 'formatted_address[1]' */
                formatted_address_2:'formatted_address_2',  /* The id of the element bound to 'formatted_address[2]' */
                formatted_address_3:'formatted_address_3',  /* The id of the element bound to 'formatted_address[3]' */
                formatted_address_4:'formatted_address_4',  /* The id of the element bound to 'formatted_address[4]' */
                line_1:'line_1',  /* The id of the element bound to 'line_1' */
                line_2:'line_2',  /* The id of the element bound to 'line_2' */
                line_3:'line_3',  /* The id of the element bound to 'line_3' */
                line_4:'line_4',  /* The id of the element bound to 'line_4' */
                latitude:'latitude',  /* The id of the element bound to 'latitude' */
                longitude:'longitude',  /* The id of the element bound to 'longitude' */
                building_number:'building_number',  /* The id of the element bound to 'building_number' */
                building_name:'building_name',  /* The id of the element bound to 'building_name' */
                sub_building_number:'sub_building_number',  /* The id of the element bound to 'sub_building_number' */
                sub_building_name:'sub_building_name',  /* The id of the element bound to 'sub_building_name' */
                thoroughfare:'thoroughfare',  /* The id of the element bound to 'thoroughfare' */
                county:'county',  /* The id of the element bound to 'county' */
                country:'country',  /* The id of the element bound to 'country' */
                district:'district',  /* The id of the element bound to 'district' */
                locality:'locality',  /* The id of the element bound to 'locality' */
                postcode:'postcode',  /* The id of the element bound to 'postcode' */
                residential:'residential'  /* The id of the element bound to 'residential' */
          },
          input:{
                id:'getaddress_input',  /* The id of the textbox' */
                name:'getaddress_input',  /* The name of the textbox' */
                class:'',  /* The class of the textbox' */
                label:'Enter your Postcode'  /* The label of the textbox' */
          },
          button:{
                id:'getaddress_button',  /* The id of the botton' */
                class:'',  /* The class of the botton' */
                label:'Search',  /* The label of the botton' */
                disabled_message:'disabled message'  /* The disabled message of the botton' */
          },
          dropdown:{
                id:'getaddress_dropdown',  /* The id of the dropdown' */
                class:'',  /* The class of the dropdown' */
                select_message:'Select your Address',  /* The select message of the dropdown' */
                template:''  /* The suggestion template of the dropdown' (see Autocomplete API)*/
          },
          error_message:{
                id:'getaddress_error_message',  /* The id of the error message' */
                class:'',  /* The class of the error message' */
                not_found:'Address not found',  /* The 'not found' message of the error message' */
          },
          endpoints:{
                autocomplete_url:undefined,  /* Local alterative autocomplete url (when API key is not used) */
                get_url:undefined /* Local alterative get url (when API key is not used) */
          }
    });

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>
    getAddress.find
    (
        'textbox_id',
        'dtoken_hEDzcyiWMI1eXXXX'
    );
</script>
Top