<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/ad9bc6b5b2de42fb9d7cd993ebb80066/pixel?tag=ViewContent&amp;noscript=1">

Autocomplete

Autocomplete from Loop54 is inspired by Amazon and empirical studies from Baymard (among others), and consists of queries and faceting on the top query hit as shown below. We build the vocabulary for Autocomplete from previous search queries, so a new engine needs a few searches before returning anything in Autocomplete.

Design guideline

product search autocomplete

Best practice

We recommend not showing more than a total of 10 rows of suggestions in a desktop version of the site, and no more than 4-8 in a mobile version of the site. The autocomplete suggestions should be requested for every key press after the user has typed 2 letters with a keypress delay of about 50-150ms to avoid flickering when the user is typing longer queries.
 
Loop54 does all the calculations for sorting in the autocomplete request, which means that no sorting is needed on the site. Autocomplete suggestions are populated automatically by the users' own words, and Loop54 sorts the suggestions based on popularity and conversions of the different suggestions.
 
Note that Loop54 does not send a fixed amount of facets back for each suggestion, the amount may vary between 0 and 5 facets in total which means that the design needs to incorporate functionality for showing everything between 5 facets plus 5 queries, to zero facets and 10 queries.
 

Decisions

Which attribute is most suitable for autocomplete-faceting? The most commonly used is a mid level category, but Loop54 can be configured to use any product attribute. Ask your implementation contact person for details!
Code examples
SHOW INSTRUCTIONS FOR: PHP JSON JAVA .NET
Below is an example of a request - response cycle of an autocomplete request with facets.
$request = new Loop54_Request("AutoComplete");
$request->setValue("QueryString",$_GET{"query"});
$request->setValue("AutoComplete_FromIndex",0);
$request->setValue("AutoComplete_ToIndex",9);
$response = Loop54_RequestHandling::getResponse("http://helloworld.54proxy.com", $request);
if ($response->success)
{
    //print out all strings as a JSON array for the front-end code to use
    echo "[";
    $items = $response->getCollection("AutoComplete");
    for($i=0;$i<count($items);$i++)
    {
        echo "\"" . $items[$i]->key . "\"";

        if($i<count($items)-1)
            echo ",";
    }
    echo "]";

}
else
{
    echo $response->requestId; //log this
}
Below is an example of a request - response cycle of an autocomplete request with facets.
POST to  http://helloworld.54proxy.com/autocomplete
{
    "UserId" : "helloworlduser",
    "IP" : "127.0.0.1",

    "QueryString" : "app",
    "AutoComplete_FromIndex" : 0,
    "AutoComplete_ToIndex" : 9,
}

Response: 200 OK
{
    "Success" : true,
    "HeroId" : "The Huge Husband of the Days",
    "Data" : {
        "AutoComplete" : [{
                "Key" : "apple",
                "Value" : 7
            }, {
                "Key" : "apple tree",
                "Value" : 2
            }
        ],
        "AutoCompleteFacets" : [{
                "Key" : "Fruits",
                "Value" : 0.289232444237587
            }
        ],
        "AutoCompleteFacetingString" : "apple"
    }
}
Below is an example of a request - response cycle of an autocomplete request with facets.
The API V2X-based Java Connector is no longer supported. 
You can view code examples for the V3-based Connector at
https://github.com/LoopFiftyFour/Java-Connector
Below is an example of a request - response cycle of an autocomplete request with facets.
The API V2X-based .NET Connector is no longer supported.
You can view code examples for the V3-based Connector at
https://github.com/LoopFiftyFour/.NET-Connector

Parameters

  • QueryString: the (partial) query typed by the user
  • Paging: The results can be separated into pages using FromIndex and ToIndex (inclusive). Asking for AutoComplete_FromIndex : 0 and AutoComplete_ToIndex : 9 will yield 10 results. 
  • Descriptives: IP and UserId (If you are using a library, the library should take care of this).