go to developers doc

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.

Overview

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.

Installation

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

HTML
        <script src="https://cdn.jsdelivr.net/gh/woosmap/woosmap-autocomplete-searchbox@latest/dist/autocompletewoosmap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/woosmap/woosmap-autocomplete-searchbox@latest/dist/autocompletewoosmap.min.css" rel="stylesheet">

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

Install dependencies

ShellSession
        $ npm install

Run

ShellSession
        $ npm run start

build

ShellSession
        $ 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:

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

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

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

HTML
        <script>
    document.getElementById('my-input').addEventListener('autocomplete-woosmap-selectcomplete', function (evt) {
        console.log(evt.woosmapLocality);
    });
</script>

Google Place Details onSelect

Place Details response documentation

HTML
        <script>
    document.getElementById('my-input').addEventListener('autocomplete-google-selectcomplete', function (evt) {
        console.log(evt.placeDetails);
    });
</script>

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:

JSON
        {
  "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 https://chairnerd.seatgeek.com/fuzzywuzzy-fuzzy-string-matching-in-python/.

Sample Usage