Woosmap MultiSearch JavaScript API
Basics and first steps to set the MultiSearch JS Lib
Hello, World
The easiest way to start learning about the Woosmap MultiSearch JavaScript Library is to see an example. The following example displays an input autocomplete searchbox and after the user select a suggestion from the pick list, get the details for this item and display corresponding json data. The library is here configured to query
- first Woosmap Localities (on types
locality,postal_codeandaddress) - then Google Places.
Installation
The Woosmap MultiSearch JS Library is loaded using a script tag, which can be added inline in your HTML file or dynamically
using a separate JavaScript file. For this example, add an input block element and include multisearch.js in your
page via the usual tags:
<script async
src="https://sdk.woosmap.com/multisearch/multisearch.js">
</script>
<input id="my-input-multisearch"
placeholder="Search for..."
autocomplete="off"
role="combobox"/>
The multisearch Object
The JavaScript class that represents the wrapper to autocomplete services is the multisearch class. When instantiating
the woosmap.multisearch({...}) you need at least to specify your desired autocomplete services’ API keys and the
order in which these services will be called:
const multisearch = window.woosmap.multisearch({
apiOrder: ["localities", "places"],
localities: {key: "woos-03ae8b61-46a4-3a8c-aa26-7c970087d5ba"},
places: {key: "AIzaSyAgaUwsVVXJ6KMxlxILqyHi_-udaQke7M4"},
});
The multisearch have two main methods: one to retrieve suggestions as the user types in the search input, and the
other to get details when the user select an item from the pick list.
Retrieve suggestions
You can retrieve suggestions from the user input by calling the autocompleteMulti() method:
multisearch.autocompleteMulti(inputValue).then(
(results) => renderPredictions(results),
(error) => console.error(error)
);
A standardized JSON response is returned with all that’s needed to highlight what’s matching with your users’ searches.
Get Details
Finally, to get the suggestion details when a user select one from the pick list, call the detailsMulti() method:
multisearch.detailsMulti({id: suggestion.id, api: suggestion.api})
.then((details) => {
console.log(details)
});
This method is needed to retrieve accurate location for every suggestion and get structured address components whatever the type of location your users looked for.
