Loading...

JavaScript - Autocomplete

Add as-you-type address completion to any HTML form. Try it

Example

Install from NPM or CDN

npm install getaddress-autocomplete

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

Usage

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

<script>
    const autocomplete = getAddress.autocomplete(
        'line1',
        'API Key or Domain Token' 
    );

    autocomplete.addEventListener("getaddress-autocomplete-address-selected", function(e){
      document.getElementById('line1').value = e.address.formatted_address[0];
      document.getElementById('line2').value = e.address.formatted_address[1];
      document.getElementById('line3').value = e.address.formatted_address[2];
      document.getElementById('town').value = e.address.formatted_address[3];
      document.getElementById('county').value = e.address.formatted_address[4];
      document.getElementById('postcode').value = e.address.postcode;
    })
</script>

Events

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

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

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

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

Options

getAddress.autocomplete(
    'textbox_id',
    'API Key',
    /*options*/{
        id_prefix:'getAddress-autocomplete' ,  /* The id of the textbox and list container */
        css_prefix?:'getAddress_autocomplete'",  /* The class name prefix */
        delay:200, /* millisecond delay between keypress and API call */
        minimum_characters:2,  /* minimum characters to initiate an API call */
        clear_list_on_select:true, /* if true, clears list on suggestion selected */
        select_on_focus:true,  /* if true, highlights textbox characters on focus*/
        show_all_for_postcode:false, /* if true, shows all addresses for postcode*/
        show_all_for_postcode_text:'Show all..',  /* show all suggestion text*/
        alt_autocomplete_url:undefined,  /* alterative local autocomplete URL (when API key is not used) */
        alt_get_url:undefined,  /* alterative local get URL (when API key is not used) */
        input_class_names:[],  /* textbox class names */
        input_show_class_names:[],  /* textbox class names on show */
        list_class_names:[],  /* list class names */
        container_class_names:[], /* container class names */
        suggestion_class_names:[], /* suggestion class names */
        highlight_suggestion:true, /* if true, highlights matched suggestion text */
        highlight_suggestion_start_tag:'<b>',  /* highlighted suggestion text start tag */
        highlight_suggestion_end_tag:'</b>',  /* highlighted suggestion text end tag */
        list_width:undefined,   /* if true, set the list width */
        suggestion_count:6, /* number of retreived suggestions (max 20) */
        auto_calc_list_height:true,   /* if true, calculates the list's height */
        suggestion_template:undefined, /* the suggestion template (see Autocomplete API)*/
        filter:undefined, /* the suggestion filter (see Autocomplete API)*/
        input_focus_on_select:true,  /* if true, sets the focus to the textbox after selecting an address*/
        debug:false, /* if true, logs behavior */
        enable_get:true /* if true, retreives address on select */
        remember_last_search:true, /* if true, suggestions near the last selected address are prioritised */
        full_screen_on_mobile:true, /* if true, opens full screen on mobile devices*/
        max_mobile_screen_width:500, /* max mobile screen width*/
        full_screen_options:undefined /* full screen display options*/
    }
);

Full Screen on Mobile

Full Screen on Mobile Options

getAddress.autocomplete(
    'textbox_id',
    'API Key',
    {
        full_screen_options:
        {
            id_prefix:'getAddress-autocomplete_modal',/*  The prefix added to all id's  */
            highlight_suggestion: false , /* if true, highlights matched suggestion text */
            highlight_suggestion_start_tag: undefined, /* highlighted suggestion text start tag */
            highlight_suggestion_end_tag: undefined, /* highlighted suggestion text end tag */
            suggestion_template: '<div><b>{formatted_address_0}</b></div>div>{formatted_address_1}{formatted_address_1,, }{formatted_address_2}{formatted_address_2,, }{formatted_address_3}{formatted_address_4,, }{formatted_address_4}{postcode,, }{postcode}</div>', /* the suggestion template (see Autocomplete API)*/
            remember_last_search: true, /* if true, stores last search */
            copy_text_on_open: true, /* if true, populates textbox on open */
            copy_text_on_close: true, /* if true, populates textbox on close */
            placeholder: undefined /* textbox placeholder */
        } 
    }
);

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