Autocomplete & Autofill
If you want to allow users to quickly pull up an address or location without typing all the details, autocomplete can help you do that.
Pricing
Each autocomplete request counts as a Search API request. Be sure to check out our own autocomplete code for tricks like debouncing, which greatly helps decrease the amount of requests sent while a user is typing. Check the pricing page for current Search API credit costs.
Coverage
Autocomplete coverage is limited to certain countries and should not be considered comprehensive of all addresses. Because of the rapidly growing nature of addresses, autocomplete should always be used as a guide and supplement to your users, and not for limiting input.
The current list of supported country codes are:
us,ae,
ar,
at,
au,
be,
bm,
br,
ca,
ch,
cl,
co,
cz,
de,
dk,
ee,
es,
fi,
fo,
fr,
gr,
is,
it,
jm,
kr,
lt,
lu,
lv,
mx,
nl,
no,
nz,
pl,
pt,
qa,
qu,
ru,
sa,
se,
si,
tw,
ua,
us,
uy,
vg,
vi,
xk,
za
Getting Started
Add the Slpy JS library and CSS to your project.
CSS Styling
Copy-paste the stylesheet <link>
lines below into your <head>
.
Item | Description |
---|---|
Slpy-Style | A basic CSS file for styling of dropdown and its results. |
JS Libraries
Copy-paste the javascript <script>
lines below into your <head>
or into the <body>
before the configuration scripts.
Item | Description |
---|---|
Slpy JS | Adds autocomplete and dynamic dropdown |
Install Slpy JS
Install Slpy or see the Slpy JS Github for more options.
Add CSS Files
Include or import the Slpy CSS files from your node_modules folder.
Autocomplete
The addAutocomplete function adds an autocomplete feature to a specified input element. This function can receive the element itself or its ID, an options object with multiple configurations, and an optional callback function that handles the selected item.
Function
inputElementOrId String | HTMLElement - Required
Either the ID of an input element or the input element itself.
options Object - Required
Object containing various configuration options.
apiKey String Required |
The key created on your Account page after you login to Slpy. |
country String Required |
The two character iso_alpha2 country code. |
autocompleteType String optional |
|
filter String optional |
For autocompleteType 'admin' or 'all' only. A comma seperated list of desired administrative types.
|
language String optional |
The preferred two character language code for the returned result. See Supported Languages for a list of codes available. Default is "en" for English. |
width String optional |
Default is width of input, with min-width of 250px. Use width option to manually set the autocomplete dropdown width. example: "300px", "100%". | offsetLeft Integer optional |
The left offset of the autocomplete dropdown, in pixels. | offsetTop Integer optional |
The top offset of the autocomplete dropdown, in pixels. | limit Integer optional |
The maximum number of results to display in the dropdown. Default/Maximum is 10. | debounceTime Integer optional |
Debounce time (in milliseconds) for search requests. Default is 175. A smaller number will improve responsiveness, but increase number of requests while typing. |
callback
Function ( returnInput, selectedItem ) - Optional
A callback function that will be executed when an item is selected. It receives the following parameters:
returnInput (HTMLElement) | The input element with the selected value. |
selectedItem (JSON Object) | The single response object of the selected item. See the Advanced Response Section for more information on its fields and behavior. |
Returns
updateAutocomplete
Function ( Object ) - Optional
addAutocomplete returns a function for updating of autocomplete options like country or autocompleteType AFTER they have been initialized. You only need to pass updated options.
Usage
Address with HTML Element
Admin with Element ID
Update Country
Response
Slpy JS is designed to automatically format the response, and populate your Input Element with the results. Check out the Advanced Autocomplete page for detailed information on the request and response.
Example
Real world examples and common use cases.
Store Locator
- Autocomplete for city and postcode
- Use a callback to show stores on a map.
Address Autofill
The addressAutocomplete function adds autocomplete to all street input or textarea elements in a Form, and will autofill address parts automatically.
Autocomplete Attribute
This function uses the autocomplete attribute for autofill to identify address fields. It supports multiple sections and attaches to each "street-address" or "address-line1" input. It will autofill "address-level1" with Region, "address-level2" with City, as well as "country", "country-name", and "postal-code". Check the usage section below for an example.
Function
formElementOrId String | HTMLElement - Required
Either the ID of an form element or the form element itself.
options Object - Required
Object containing various configuration options.
apiKey String Required |
The key created on your Account page after you login to Slpy. |
country String Required |
The two character iso_alpha2 country code. |
language String optional |
The preferred two character language code for the returned result. See Supported Languages for a list of codes available. Default is "en" for English. |
width String optional |
Default is width of input, with min-width of 250px. Use width option to manually set the autocomplete dropdown width. example: "300px", "100%". | offsetLeft Integer optional |
The left offset of the autocomplete dropdown, in pixels. | offsetTop Integer optional |
The top offset of the autocomplete dropdown, in pixels. | limit Integer optional |
The maximum number of results to display in the dropdown. Default/Maximum is 10. | debounceTime Integer optional |
Debounce time (in milliseconds) for search requests. Default is 175. A smaller number will improve responsiveness, but increase number of requests while typing. |
Returns
updateAutocomplete
Array ( updateAutocomplete ) - Optional
addressAutocomplete returns an array of updateAutocomplete functions for updating of autocomplete options like the country after they have been initialized. You only need to pass updated options.
Usage
Example
Real world examples and common use cases.
Shipping Checkout
- Autocomplete for shipping and billing
- Autofill address parts
In Depth
Read the Advanced Autocomplete page for detailed information on the request and response used in the Search API. You can use the callback
in addAutocomplete to create custom features like the addressAutocomplete function.
Next Steps
Enhance your search with Maps or Autocomplete
Search & Geocoding
- Add a search bar to your map.
- Translate addresses to coordinates
- Search for points of interest.
Maps
- Display your location
- Provide context to an address
- Add popups for more information