Localities JavaScript API
Autocomplete on Localities using the Woosmap Localities JavaScript APIIntroduction
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.