Localities JavaScript API
Autocomplete on Localities using the Woosmap Localities JavaScript API
Introduction
The Localities JavaScript API enable your users to search for city names and postcodes. It’s a lightweight JavaScript library to quickly implement Localities REST API.
Add the following snippet to the <head> tag of your site.
<script src="https://sdk.woosmap.com/localities/localities.js"></script>
To begin with the Localities Service, you need to build a new AutocompleteService object passing the key parameter corresponding to your project public key.
const key = 'woos-xxxx'; //your project public key
let autocompleteService = new woosmap.localities.AutocompleteService(key);
Usage
Here are two code samples to help you use the Localities JS API.
On each keyup event fired on the dedicated text input, a getQueryPredictions() is called and results displayed below.
To understand how to go deeper with the Localities JS API, please check the Localities JS API Reference.
Simple example
The standard description field is used to display suggestions.
Advanced example
In this example, we format the result string manually before displaying it, so the description field from results is not used. A custom description is built instead, using other fields from the results. In this case, when searching for a postal code, suggestions are built from the fields name, postal_town, admin_0. When searching for a city name, suggestions come from the basic description field. We also defined a debounce time at 200 milliseconds to prevent sending useless requests while users are writing search text.