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.

• JavaScript HTML
• Module Bundler

<!-- CSS -->
<link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">

<!-- JS -->
<script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>

npm install slpy

import 'slpy/dist/css/slpy-style.css'

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

slpy.addAutocomplete( inputElementOrId, options, callback );

inputElementOrId String | HTMLElement - Required

Either the ID of an input element or the input element itself.

options Object - Required

Object containing various configuration options.

callback
Function ( returnInput, selectedItem ) - Optional

A callback function that will be executed when an item is selected. It receives the following parameters:

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.

var autocompleteInput = slpy.addAutocomplete( inputElementOrId, options, callback );

//trigger update
autocompleteInput.updateAutocomplete({country: "ca"});

Usage

Address with HTML Element

var inputElement = document.getElementById('input-element-id');
slpy.addAutocomplete( inputElement, {
	apiKey: 'your-api-key',
	country: 'US',
	autocompleteType: 'address',
	}
 );

Admin with Element ID

slpy.addAutocomplete( 'input-element-id', {
	apiKey: 'your-api-key',
	country: 'US',
	autocompleteType: 'admin',
	filter: 'city,region,postcode',
	width: "100%",
	offsetLeft: -25,
	offsetTop: 5,
	limit: 8
  }, 
  function(returnInput, selectedItem) {
	console.log('Selected item:', selectedItem);
  }
 );

Update Country

<select onchange="changeCountry(this)">
	<option value="US" selected>United States</option>
	<option value="CA">Canada</option>
</select>

<script>
	var autocompleteInput = slpy.addAutocomplete(inputElement, {
		apiKey: 'your-api-key',
		country: 'US'
		}
	);
	function changeCountry(selectedElement) {
		autocompleteInput.updateAutocomplete({country: "ca"});
	}
</script>

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.

• Address Response Values
• Admin Response Values

Example

Real world examples and common use cases.

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.

• HTML Spec - Autofilling form: Autocomplete attribute

Function

slpy.addressAutocomplete( formElementOrId, options );

formElementOrId String | HTMLElement - Required

Either the ID of an form element or the form element itself.

options Object - Required

Object containing various configuration options.

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.

var formAutocompletes = slpy.addressAutocomplete( formElementOrId, options );

//trigger update
formAutocompletes.forEach(function(autocompleteInput ) {
		autocompleteInput.updateAutocomplete({
			country: selectedOption.value
		});
});

Usage

<form id="form-element-id">
	<!-- Residential Shipping -->
	<input name="ra" autocomplete="section-residential shipping address-line1">
	<input name="rc" autocomplete="section-residential shipping address-level2">
	<input name="rr" autocomplete="section-residential shipping address-level1">
	<input name="rp" autocomplete="section-residential shipping postal-code">

	<!-- Company Shipping -->
	<textarea name="ca" autocomplete="section-company shipping street-address">
	<input name="cc" autocomplete="section-company shipping address-level2">
	<input name="cr" autocomplete="section-company shipping address-level1">
	<input name="cp" autocomplete="section-company shipping postal-code">

	<!-- Billing -->
	<input name="ba" autocomplete="billing address-line1">
	<input name="bc" autocomplete="billing address-level2">
	<input name="br" autocomplete="billing address-level1">
	<input name="bp" autocomplete="billing postal-code">
</form>

slpy.addressAutocomplete( 'form-element-id', {
  apiKey: 'your-api-key',
  country: 'US',
} );

Example

Real world examples and common use cases.

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.

• Making a Manual Request
• Response Object Values

Next Steps

Enhance your search with Maps or Autocomplete