Search as you type

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" { "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" } } try it here!