---
title: Search as you type
slug: apis/search-as-you-type
docTags: 
createdAt: 2022-04-25T06:11:04.000Z
---

:::hint{type="info"}
If you haven't gone through the prerequisites and the v2 structure, please have a look at [Overview](docId\:cZeodl0sKcuv-18IPupLr) 
:::

The suggestions object is used for fetching autocomplete suggestions. This allows you to try and **predict** what the customer might be looking for and propose relevant search queries applicable to your catalog.

For example when the customer starts typing "a", Klevu can start **making suggestions**. For example it may suggest some terms starting with the letter "a" like "arris desk". It may also suggest terms not starting with "a" such as "black arris desk".

The Klevu suggestions are **error tolerant**, e.g. "fairry lights" would find suggestions for "fairy lights", and also **order tolerant**, e.g. "lights fairy" would find suggestions for "fairy lights".

:::ApiMethodV2
```json
{
  "tab": "examples",
  "url": "https://{{hostname}}/cs/v2/search",
  "name": "Instant auto complete",
  "method": "POST",
  "request": {
    "pathParameters": [],
    "queryParameters": [],
    "headerParameters": [],
    "bodyDataParameters": [
      {
        "kind": "required",
        "name": "id",
        "type": "string",
        "description": "Every suggestion request must have a unique identifier associated with it. When a result is retrieved, the ID of each query is associated with it's respective response."
      },
      {
        "kind": "required",
        "name": "typeOfRequest",
        "type": "string",
        "description": "This parameter defines the type of request. Specify 'AUTO_SUGGESTIONS' for typeahead autosuggestion predictions."
      },
      {
        "kind": "required",
        "name": "query",
        "type": "string",
        "description": "The search term or phrase for which the suggestions are retrieved from Klevu Search."
      },
      {
        "kind": "optional",
        "name": "hlStartElem",
        "type": "string",
        "description": "By default, the section of an autosuggestion matching what the customer has typed is highlighted in bold using values of '<b>' and </b>'. If you prefer something else, you can override these values with your own HTML."
      },
      {
        "kind": "optional",
        "name": "hlEndElem",
        "type": "string",
        "description": "By default, the section of an autosuggestion matching what the customer has typed is highlighted in bold using values of '<b>' and </b>'. If you prefer something else, you can override these values with your own HTML."
      }
    ],
    "formDataParameters": []
  },
  "results": {
    "languages": [
      {
        "id": "3XlvmT855lGkJOht0nPXg",
        "code": "{\n    \"meta\": {\n        \"qTime\": 24,\n        \"responseCode\": 200\n    },\n    \"suggestionResults\": [\n        {\n            \"id\": \"mySuggestionsQuery1\",\n            \"suggestions\": [\n                {\n                    \"suggest\": \"sweatshirt\"\n                },\n                {\n                    \"suggest\": \"street sweatshirt\"\n                }\n            ]\n        },\n        {\n            \"id\": \"mySuggestionsQuery2\",\n            \"suggestions\": [\n                {\n                    \"suggest\": \"<span style='color:red'>short</span>\"\n                },\n                {\n                    \"suggest\": \"<span style='color:red'>short</span>s\"\n                },\n                {\n                    \"suggest\": \"<span style='color:red'>short</span>-sleeve\"\n                }\n            ]\n        }\n    ]\n}",
        "language": "200",
        "customLabel": ""
      }
    ],
    "selectedLanguageId": "3XlvmT855lGkJOht0nPXg"
  },
  "examples": {
    "languages": [
      {
        "id": "jSU7DlYyJ_eUh63YSP682",
        "code": "{\n  \"suggestions\": [\n    {\n      \"id\": \"mySuggestionsQuery1\",\n      \"typeOfRequest\": \"AUTO_SUGGESTIONS\",\n      \"query\": \"shirt\",\n      \"limit\": 2\n    },\n    {\n      \"id\": \"mySuggestionsQuery2\",\n      \"typeOfQuery\": \"AUTO_SUGGESTIONS\",\n      \"query\": \"short\",\n      \"limit\": 3,\n      \"hlStartElem\": \"<span style='color:red'>\",\n      \"hlEndElem\": \"</span>\"\n    }\n  ],\n  \"context\": {\n    \"apiKeys\": [\n      \"klevu-156925593843210765\"\n    ]\n  }\n}",
        "language": "json",
        "customLabel": "Request Body (JSON)"
      },
      {
        "id": "SCsTjoapS-0-uf4KJtHCj",
        "code": "<?php\n\n$curl = curl_init();\n\ncurl_setopt_array($curl, array(\n  CURLOPT_URL => 'https://eucs15v2.ksearchnet.com/cs/v2/search',\n  CURLOPT_RETURNTRANSFER => true,\n  CURLOPT_ENCODING => '',\n  CURLOPT_MAXREDIRS => 10,\n  CURLOPT_TIMEOUT => 0,\n  CURLOPT_FOLLOWLOCATION => true,\n  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,\n  CURLOPT_CUSTOMREQUEST => 'POST',\n  CURLOPT_POSTFIELDS =>'{\n  \"suggestions\": [\n    {\n      \"id\": \"mySuggestionsQuery1\",\n      \"typeOfRequest\": \"AUTO_SUGGESTIONS\",\n      \"query\": \"shirt\",\n      \"limit\": 2\n    },\n    {\n      \"id\": \"mySuggestionsQuery2\",\n      \"typeOfRequest\": \"AUTO_SUGGESTIONS\",\n      \"query\": \"short\",\n      \"limit\": 3,\n      \"hlStartElem\": \"<span style=\\'color:red\\'>\",\n      \"hlEndElem\": \"</span>\"\n    }\n  ],\n  \"context\": {\n    \"apiKeys\": [\n      \"klevu-156925593843210765\"\n    ]\n  }\n}',\n  CURLOPT_HTTPHEADER => array(\n    'Content-Type: text/plain'\n  ),\n));\n\n$response = curl_exec($curl);\n\ncurl_close($curl);\necho $response;\n",
        "language": "php",
        "customLabel": ""
      },
      {
        "id": "EbXKm6hQoHGHMh1EAhNmw",
        "code": "var data = \"{\\n  \\\"suggestions\\\": [\\n    {\\n      \\\"id\\\": \\\"mySuggestionsQuery1\\\",\\n      \\\"typeOfRequest\\\": \\\"AUTO_SUGGESTIONS\\\",\\n      \\\"query\\\": \\\"shirt\\\",\\n      \\\"limit\\\": 2\\n    },\\n    {\\n      \\\"id\\\": \\\"mySuggestionsQuery2\\\",\\n      \\\"typeOfQuery\\\": \\\"AUTO_SUGGESTIONS\\\",\\n      \\\"query\\\": \\\"short\\\",\\n      \\\"limit\\\": 3,\\n      \\\"hlStartElem\\\": \\\"<span style='color:red'>\\\",\\n      \\\"hlEndElem\\\": \\\"</span>\\\"\\n    }\\n  ],\\n  \\\"context\\\": {\\n    \\\"apiKeys\\\": [\\n      \\\"klevu-156925593843210765\\\"\\n    ]\\n  }\\n}\";\n\nvar xhr = new XMLHttpRequest();\nxhr.withCredentials = false;\n\nxhr.addEventListener(\"readystatechange\", function() {\n  if(this.readyState === 4) {\n    console.log(this.responseText);\n  }\n});\n\nxhr.open(\"POST\", \"https://eucs15v2.ksearchnet.com/cs/v2/search\");\nxhr.setRequestHeader(\"Content-Type\", \"text/plain\");\n\nxhr.send(data);",
        "language": "javascript",
        "customLabel": ""
      },
      {
        "id": "qvlH3fSg-r8UBEAurxbOD",
        "code": "OkHttpClient client = new OkHttpClient().newBuilder()\n  .build();\nMediaType mediaType = MediaType.parse(\"text/plain\");\nRequestBody body = RequestBody.create(mediaType, \"{\\n  \\\"suggestions\\\": [\\n    {\\n      \\\"id\\\": \\\"mySuggestionsQuery1\\\",\\n      \\\"typeOfRequest\\\": \\\"AUTO_SUGGESTIONS\\\",\\n      \\\"query\\\": \\\"shirt\\\",\\n      \\\"limit\\\": 2\\n    },\\n    {\\n      \\\"id\\\": \\\"mySuggestionsQuery2\\\",\\n      \\\"typeOfQuery\\\": \\\"AUTO_SUGGESTIONS\\\",\\n      \\\"query\\\": \\\"short\\\",\\n      \\\"limit\\\": 3,\\n      \\\"hlStartElem\\\": \\\"<span style='color:red'>\\\",\\n      \\\"hlEndElem\\\": \\\"</span>\\\"\\n    }\\n  ],\\n  \\\"context\\\": {\\n    \\\"apiKeys\\\": [\\n      \\\"klevu-156925593843210765\\\"\\n    ]\\n  }\\n}\");\nRequest request = new Request.Builder()\n  .url(\"https://eucs15v2.ksearchnet.com/cs/v2/search\")\n  .method(\"POST\", body)\n  .addHeader(\"Content-Type\", \"text/plain\")\n  .build();\nResponse response = client.newCall(request).execute();",
        "language": "java",
        "customLabel": ""
      },
      {
        "id": "_D8z-JNrIkf8f0KTEcMOz",
        "code": "var request = require('request');\nvar options = {\n  'method': 'POST',\n  'url': 'https://eucs15v2.ksearchnet.com/cs/v2/search',\n  'headers': {\n    'Content-Type': 'text/plain'\n  },\n  body: '{\\n  \"suggestions\": [\\n    {\\n      \"id\": \"mySuggestionsQuery1\",\\n      \"typeOfRequest\": \"AUTO_SUGGESTIONS\",\\n      \"query\": \"shirt\",\\n      \"limit\": 2\\n    },\\n    {\\n      \"id\": \"mySuggestionsQuery2\",\\n      \"typeOfQuery\": \"AUTO_SUGGESTIONS\",\\n      \"query\": \"short\",\\n      \"limit\": 3,\\n      \"hlStartElem\": \"<span style=\\'color:red\\'>\",\\n      \"hlEndElem\": \"</span>\"\\n    }\\n  ],\\n  \"context\": {\\n    \"apiKeys\": [\\n      \"klevu-156925593843210765\"\\n    ]\\n  }\\n}'\n\n};\nrequest(options, function (error, response) {\n  if (error) throw new Error(error);\n  console.log(response.body);\n});\n",
        "language": "nodejs",
        "customLabel": ""
      }
    ],
    "selectedLanguageId": "SCsTjoapS-0-uf4KJtHCj"
  },
  "description": "This is an example to fetch instant auto complete using APIs.",
  "currentNewParameter": {
    "label": "Body Parameter",
    "value": "bodyDataParameters"
  },
  "hasTryItOut": false,
  "autoGeneratedAnchorSlug": "instant-auto-complete",
  "legacyHash": "YX-Yxs_890rjZ7cyoPNtS"
}
```
:::

### Try it here!&#x20;

:::Iframe{iframeHeight="0" code="<iframe src=&#x22;https://codesandbox.io/embed/klevu-api-sendbox-4ktfrp?codemirror=1&fontsize=14&hidenavigation=0&theme=dark&view=preview&initialpath=?payload=searchAsYouType&#x22;&#xA;     style=&#x22;width:100%; height:550px; border:0; border-radius: 4px; overflow:hidden;&#x22;&#xA;     title=&#x22;klevu_api sendbox&#x22;&#xA;     allow=&#x22;accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking&#x22;&#xA;     sandbox=&#x22;allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts&#x22;&#xA;     &#xA;   ></iframe>"}

:::