JavaScript - Autocomplete
Add as-you-type address completion to any HTML form.
Example
Install from NPM or CDN
npm install @getaddress/autocomplete
<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-3.0.3.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 enableAutocomplete = async ()=>
{
const autocomplete = await getAddress.autocomplete(
'line1',
'API Key or Domain Token'
);
autocomplete.addEventListener("getaddress-autocomplete-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;
})
}
enableAutocomplete();
</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-selected", function(e){
console.log(e.address);
})
document.addEventListener("getaddress-autocomplete-selected-failed", function(e){
console.log(e.status);
console.log(e.message);
})
Options
getAddress.autocomplete(
'textbox_id',
'API Key',
/*options*/{
delay:500, /* millisecond delay between keypress and API call */
minimum_characters:2, /* minimum characters to initiate an API call */
suggestion_count:6, /* number of retreived suggestions (max 20) */
item_template = "(suggestion)=>{"+
+"return `<div style='display:flex;' ><div class='ga-autocomplete-icon ga-autocomplete-location-icon'></div><div style='width:100%' >${suggestion.address}</div></div>`; " +
+ "}, /* Function that accepts a suggestion and returns a string */"
mobile_item_template: undefined , /* Function that accepts a suggestion and returns a string. If undefined, item_template is used. */
history_item_template: undefined , /* Function that accepts a suggestion and returns a string. If undefined, item_template is used. */
mobile_history_item_template: undefined , /* Function that accepts a suggestion and returns a string. If undefined, item_template is used. */
footer_template: undefined , /* Function that accepts an array of HTMLElements and returns a string.*/
list_style: undefined , /* injected into the list's style attribute*/
list_item_style: undefined , /* injected into each list items's style attribute*/
mobile_list_item_style: undefined , /* injected into each mobile list items's style attribute*/
history_list_item_style: undefined , /* injected into each history list items's style attribute*/
enable_repositioning:true /* when true, list will automatically postion itself to the best fit*/
highlight_search_text:false, /* if true, highlights matched suggestion text */
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)*/
filter:undefined, /* the suggestion filter (see Autocomplete API)*/
enable_history: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*/
show_postcode:false /* always display postcode in suggestions*/
}
);Full Screen on Mobile
When parameter 'full_screen_on_mobile' is set to true, Autocomplete will open in full screen on mobile devices.
await getAddress.autocomplete(
'textbox_id',
'API Key',
{
full_screen_on_mobile:true
}
);Example
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>CSS Variables
Customise the appearance by overriding css variables.
| Name | Default |
|---|---|
| ––ga-autocomplete-list-background-color | #fff |
| ––ga-autocomplete-list-font-size | 0.9em |
| ––ga-autocomplete-list-bottom-margin-top | 2px |
| ––ga-autocomplete-list-bottom-margin-bottom | 0 |
| ––ga-autocomplete-list-bottom-margin-left | 0 |
| ––ga-autocomplete-list-bottom-margin-right | 8px |
| ––ga-autocomplete-list-right-margin-left | 6px |
| ––ga-autocomplete-list-right-margin-top | auto |
| ––ga-autocomplete-list-right-margin-right | auto |
| ––ga-autocomplete-list-right-margin-bottom | auto |
| ––ga-autocomplete-list-top-margin-left | 6px |
| ––ga-autocomplete-list-top-margin-right | auto |
| ––ga-autocomplete-list-top-margin-top | auto |
| ––ga-autocomplete-list-top-margin-bottom | auto |
| ––ga-autocomplete-list-left-margin-left | 6px |
| ––ga-autocomplete-list-left-margin-right | auto |
| ––ga-autocomplete-list-left-margin-top | auto |
| ––ga-autocomplete-list-left-margin-bottom | auto |
| ––ga-autocomplete-list-border-radus | 12px |
| ––ga-autocomplete-list-border-style | solid |
| ––ga-autocomplete-list-border-width | 1px |
| ––ga-autocomplete-list-border-color | #ccc |
| ––ga-autocomplete-list-z-index | 2010 |
| ––ga-autocomplete-list-padding-top | 12px |
| ––ga-autocomplete-list-padding-bottom | 12px |
| ––ga-autocomplete-list-padding-right | 0 |
| ––ga-autocomplete-list-padding-left | 0 |
| ––ga-autocomplete-list-box-shadow | 0 2px 4px rgba(0, 0, 0, .2) |
| ––ga-autocomplete-list-max-height | 30em |
| ––ga-autocomplete-list-overflow-y | auto |
| ––ga-autocomplete-list-item-hover-background-color | #f3f3f3 |
| ––ga-autocomplete-list-item-hover-cursor | pointer |
| ––ga-autocomplete-list-item-hover-outline | 0 |
| ––ga-autocomplete-list-item-focused-background-color | #f3f3f3 |
| ––ga-autocomplete-list-item-focused-outline | 0 |
| ––ga-autocomplete-mobile-z-index | 9999 |
| ––ga-autocomplete-mobile-background-color | #fefefe |
| ––ga-autocomplete-mobile-margin-bottom | 10px |
| ––ga-autocomplete-mobile-margin-top | 0 |
| ––ga-autocomplete-mobile-margin-right | 0 |
| ––ga-autocomplete-mobile-margin-left | 0 |
| ––ga-autocomplete-mobile-list-item-padding-top | 5px |
| ––ga-autocomplete-mobile-list-item-padding-bottom | 5px |
| ––ga-autocomplete-mobile-list-item-padding-right | 0 |
| ––ga-autocomplete-mobile-list-item-padding-left | 0 |
| ––ga-autocomplete-location-icon-color | #EA4335 |
| ––ga-autocomplete-location-icon-font-familiy | getAddress |
| ––ga-autocomplete-location-history-item-color | grey |
| ––ga-autocomplete-location-padding-top | 4 |
| ––ga-autocomplete-location-padding-bottom | 2px |
| ––ga-autocomplete-location-padding-left | 0 |
| ––ga-autocomplete-location-padding-right | 0 |
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.1.1.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*/
show_postcode:false /* always display postcode in suggestions*/
}
);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>Autocomplete using the Browser's native Datalist element. Try it
A Datalist's appearance is set by the browser manufacturer and may not support 'fuzzy' matches.
Example
Install from NPM or CDN
npm install getaddress-autocomplete-native
<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-native-2.2.1.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-native' , /* The id of the textbox and list container */
delay:100, /* millisecond delay between keypress and API call */
minimum_characters:2, /* minimum characters to initiate an API call */
select_on_focus:true, /* if true, highlights textbox characters on focus*/
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) */
suggestion_count:6, /* number of retreived suggestions (max 20) */
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 */
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*/
show_postcode:false /* always display postcode in suggestions*/
}
);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>