Woosmap MultiSearch Library

Smart search of multiple places and addresses APIs

  1. Overview
  2. How autocomplete services are combined?
  3. Hello, World
  4. Installation
  5. The multisearch Object

Overview

Woosmap MultiSearch is a javascript library designed to return location suggestions through calling several autocomplete services. This library makes location searches more efficient and cost-effective by allowing you to easily combine Woosmap Localities API, Woosmap Address API, Woosmap Search API (stores) and Google Places APIs (Places Autocomplete and Places Details).

No Interface Provided
This library does not provide any user interface but focuses on querying autocomplete services. However, it is pretty easy to display results on your own.

How autocomplete services are combined?

Autocomplete services are requested in your desired ordered. Most often, only the first service will be queried. In some cases, for instance when searching for street addresses, Woosmap Localities can be insufficient.

By comparing the user input to the returned results and computing a string matching score between these two values, the library can automatically switch to the next autocomplete service and thereby provide suggestions that better suits the needs.

Hello, World

The easiest way to start learning about the Woosmap MultiSearch 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 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