Autocomplete Localities Fallback Google Places

Easy-to-use Autocomplete widget to search for Woosmap Localities and fallback on Google Places.
  1. Overview
  2. Installation
  3. Basic Usage
  4. Add Listener on Selected Predictions
  5. Ratio : Partial String Similarity
  6. Sample Usage

This API has been deprecated and replaced with Multisearch JavaScript Library.

Lightweight and customizable autocomplete widget to search for Woosmap Localities and fallback on Google Places according to a partial string similarity ratio and other certain specific criteria.


When Searching for Woosmap Localities using this widget, a matching ratio is computed between the user input and for each returned items.

Check how we calculate ratio or explore source code on GitHub.


You can use the jsDelivr CDN for both JS and CSS.

        <script src=""></script>
<link href="" rel="stylesheet">


Otherwise, fork or download the source code and run the following commands:

Install dependencies

        $ npm install



        $ npm run start



        $ npm run build


Basic Usage

Before you try anything, you need to add an input block element and include autocompletewoosmap.css and autocompletewoosmap.js in your page, via the usual tags:

        <link href="./autocompletewoosmap.css" rel="stylesheet"></head>
<script type="text/javascript" src="./autocompletewoosmap.js"></script></body>
<input id="my-input"/>


Then, you need at least to specify your Woosmap Project Key and your Google API key before instantiating the widget with default criteria:

    const config = {
        woosmap: {projectKey: "woos-XXXX"},
        google: {apiKey: "AIzaYYYYYY-1234567"}
    const input = document.getElementById("my-input");
    new AutocompleteWoosmapSearchBox(input, config);


Loading Google Places is optional, since the widget does it automatically according to the Google options.

Add Listener on Selected Predictions

When a user select a Woosmap Localities or a Google Places item from the list of autocomplete predictions, an event is fired with either a Woosmap Localities object or a Google Places Details object. You’ll need to register on the Input text two EventListener named 'autocomplete-woosmap-selectcomplete' and 'autocomplete-google-selectcomplete'.

Woosmap Localities onSelect

Woosmap Localities response documentation

    document.getElementById('my-input').addEventListener('autocomplete-woosmap-selectcomplete', function (evt) {


Google Place Details onSelect

Place Details response documentation

    document.getElementById('my-input').addEventListener('autocomplete-google-selectcomplete', function (evt) {


And you’re done!

Ratio : Partial String Similarity

A ratio value is added to each autocomplete item and calculated as a partial levenshtein ratio of the two strings: the input from the user and the value of autocomplete item. We use the fuzzy string matching JavaScript library fuzzball, part of fuzzywuzzy python library.

For example a search with the term 'blast' retrieve the following Woosmap Localities and corresponding ratio:

  "label": "Blaston, Leicestershire, United Kingdom",
  "matching ratio": 100,
  "label": "Blantyre, Southern Region, Malawi",
  "matching ratio": 80
  "label": "Blasbach, Gießen, Germany",
  "matching ratio": 80
  "label": "Blașcovici, Timiş, Romania",
  "matching ratio": 60
  "label": "Blåsbo, Västerås, Sweden",
  "matching ratio": 60


To learn about Fuzzy String Matching, check

Sample Usage