Source: https://developers.woosmap.com/products/multisearch-lib/js/get-started/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Woosmap MultiSearch JavaScript API



## 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_code` and `address`)
- then Google Places.

https://demo.woosmap.com/js-samples/samples/multisearch-js-api/app/dist/
[](https://demo.woosmap.com/js-samples/samples/multisearch-js-api/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/multisearch-js-api/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/multisearch-js-api/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/multisearch-js-api)

## 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:

```html
<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:

```javascript
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:

```javascript
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:

```javascript
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.