Autocomplete Search

How to use Autocomplete Search API

  1. Overview
  2. Autocomplete Search example
  3. Response
  4. JavaScript Sample

Overview

The API provides an autocomplete endpoint. This allows you to perform full text search on your asset’s localizedNames.

Depending on the parameters of your query, the API will respond with a list of predictions based on similarity in all the localizedNames you provided for your assets.

The user’s input should be set into the parameter query using the field localized.

If you need to retrieve full details of an autocomplete result (coordinates, address, opening hours…) you will be required to perform a Search API call using the store_id.

Autocomplete Search example

Here we assume that the user typed street and we send his request with the parameter language set to en.

Sample Autocomplete call
        https://api.woosmap.com/stores/autocomplete/
  ?language=en
  &limit=3
  &query=localized%3Astreet
  &key=YOUR_PUBLIC_API_KEY
    
        curl -L -X GET 'https://api.woosmap.com/stores/autocomplete/?language=en&query=localized%3Astreet&limit=3&key=YOUR_PUBLIC_API_KEY' \
-H 'Referer: http://localhost'

    
        var requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://api.woosmap.com/stores/autocomplete/?language=en&query=localized%3Astreet&limit=3&key=YOUR_PUBLIC_API_KEY", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

    
        var axios = require('axios');

var config = {
  method: 'get',
  url: 'https://api.woosmap.com/stores/autocomplete/?language=en&query=localized%3Astreet&limit=3&key=YOUR_PUBLIC_API_KEY',
  headers: { 
    'Referer': 'http://localhost'
  }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});


    
        import requests

url = "https://api.woosmap.com/stores/autocomplete/?language=en&query=localized%3Astreet&limit=3&key=YOUR_PUBLIC_API_KEY"

payload={}
headers = {
    'Referer': 'http://localhost'
}

response = requests.request("GET", url, headers=headers, data=payload)

print(response.text)


    
        OkHttpClient client = new OkHttpClient().newBuilder()
  .build();
MediaType mediaType = MediaType.parse("text/plain");
RequestBody body = RequestBody.create(mediaType, "");
Request request = new Request.Builder()
  .url("https://api.woosmap.com/stores/autocomplete/?language=en&query=localized%3Astreet&limit=3&key=YOUR_PUBLIC_API_KEY")
  .method("GET", body)
  .addHeader("Referer", "http://localhost")
  .build();
Response response = client.newCall(request).execute();

    
        require "uri"
require "net/http"

url = URI("https://api.woosmap.com/stores/autocomplete/?language=en&query=localized%3Astreet&limit=3&key=YOUR_PUBLIC_API_KEY")

https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Referer"] = "http://localhost"

response = https.request(request)
puts response.read_body


    

Response

Sample Autocomplete response
JSON
        {
  "predictions":
    [
      {
        "store_id": "2670",
        "name": "Sun Street",
        "types": ["Coffee shop"],
        "matched_substrings": [{ "offset": 4, "length": 6 }],
        "highlighted": "Sun <b>Street</b>",
      },
      {
        "store_id": "16069",
        "name": "7th Street",
        "types": ["Coffee shop"],
        "matched_substrings": [{ "offset": 4, "length": 6 }],
        "highlighted": "7th <b>Street</b>",
      },
      {
        "store_id": "1013873",
        "name": "The Street",
        "types": ["Coffee shop"],
        "matched_substrings": [{ "offset": 4, "length": 6 }],
        "highlighted": "The <b>Street</b>",
      },
      {
        "store_id": "1008896",
        "name": "12th Street",
        "types": ["Coffee shop"],
        "matched_substrings": [{ "offset": 5, "length": 6 }],
        "highlighted": "12th <b>Street</b>",
      },
      {
        "store_id": "1023565",
        "name": "Doha Street",
        "types": ["Coffee shop"],
        "matched_substrings": [{ "offset": 5, "length": 6 }],
        "highlighted": "Doha <b>Street</b>",
      },
    ],
}

    

The name property of the predictions will be filled with the localized name of your asset in the language you provided in your query if it exists, or else the default name property.

The response includes some useful informations for your front-end rendering like the highlighted property which returns an HTML formatted string with, if it exists, the matched substring(s) in bold font.

The offset and the length of the matched substring(s) are also available in the list provided on matched_substrings property.

And of course the response contains the store_id property which you can use to retrieve full data (like coordinates, address, opening hours…) using our classic Search API.

The field localized of the Search Query is only available on the Autocomplete API endpoint and not on the Search endpoint. You can use every field available in a Search Query on both endpoints. The full text search is only available on the localizedNames property. Searching using name or city will only returns perfect matches.

You can find explore the following example that performs an autocomplete search on user input and retrieves the store properties when an item in the predictions list is clicked.

JavaScript Sample

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