JavaScript Typeahead

Make any form field complete itself — a suburb, a postcode, a street or a state. It ships in the same package as the JavaScript Autocomplete, looks the same, and is free: it suggests plain values, not addresses, so it never spends a look-up.

Install from NPM or CDN

npm install getaddress-au-autocomplete

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

Usage

<label for="suburb">Suburb</label>
<input id="suburb" type="text">

<label for="street">Street</label>
<input id="street" type="text">

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

<script>
    const token = '{your-domain-token}';

    // Each field completes on its own.
    getAddressAu.typeahead('suburb', token, { search: 'locality' });
    getAddressAu.typeahead('street', token, { search: 'street' });
    getAddressAu.typeahead('postcode', token, { search: 'postcode' });
</script>

From npm:

import { typeahead } from 'getaddress-au-autocomplete';

typeahead('suburb', '{your-domain-token}', { search: 'locality' });

Events

input.addEventListener('getaddressau-typeahead-suggestions', e => console.log(e.suggestions));
input.addEventListener('getaddressau-typeahead-selected', e => console.log(e.value));

Options

Option	Default	What it does
search	all fields	The field this input completes — "locality", "postcode", "street" or "state" — or an array of them. Unset, every field is completed alike.
filter	–	{ state, locality, postcode }, fixed for this field — e.g. { state: 'NSW' } on a form that only takes NSW addresses. Blank values are ignored.
selected	–	Called with the value picked.
error	logs	Called when a request fails.
set_input_value	true	Write the picked value into the input.
min_characters	1	Characters before the first request.
debounce_ms	150	Quiet period before a request is sent. Left unset, it lengthens on a slow connection (up to 500). Set it to fix the delay.
max_suggestions	6	Maximum values shown. The API returns at most 20.
inject_styles	true	Inject the default stylesheet — the one the address widget uses.
class_names	–	Override the class names on the elements the widget creates.

Use a domain token, not an API key

Anything in browser JavaScript is readable by anyone who opens the page. A domain token is restricted to the domain you create it for, so publishing it costs you nothing. Create one in your console.