Woosmap MultiSearch JavaScript API

Smart search of multiple places and addresses APIs

  1. Hello, World
  2. Installation
  3. The multisearch Object

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 configured here to query first Woosmap Localities then Woosmap Address 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", "address", "places"],
    localities: {key: "woos-03ae8b61-46a4-3a8c-aa26-7c970087d5ba"},
    address: {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.

Was this article helpful?
Have more questions? Submit a request