<img src="https://secure.leadforensics.com/84962.png" style="display:none;">

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.
Request loopRequest = new Request("AutoComplete",request,response);
loopRequest.setValue("QueryString",request.getParameterValues("query")[0]);
loopRequest.setValue("AutoComplete_FromIndex",0);
loopRequest.setValue("AutoComplete_ToIndex",9);
Response loopResponse = RequestHandling.getResponse("http://helloworld.54proxy.com", loopRequest);
if (loopResponse.success)
{
    //print out all strings as a JSON array for the front-end code to use
    response.getWriter().print("[");
    List<Item> items = loopResponse.getItemArray("AutoComplete");
    for(int i=0;i<items.size();i++)
    {
        Item item = items.get(i);
        response.getWriter().print("\"" + item.key + "\"");

        if(i<items.size()-1)
            response.getWriter().print(",");
    }
    response.getWriter().print("]");
}
else
{
    response.getWriter().print("ERROR: " + loopResponse.requestId); //keep track of unsuccessful requests
}
Below is an example of a request - response cycle of an autocomplete request with facets.
var request = new Loop54.Request("AutoComplete");
request.SetValue("QueryString", Request.QueryString["query"]);
request.SetValue("AutoComplete_FromIndex", 0);
request.SetValue("AutoComplete_ToIndex", 9);
var response = Loop54.RequestHandling.GetResponse("http://helloworld.54proxy.com", request);

if (response.Success)
{
    var keys = response.GetValue<List<Item<string>>>("AutoComplete").Select(o => o.Key);
    var suggestions = string.Join("\",\"", keys);

    //print out all strings as a JSON array for the front-end code to use
    Response.Write("[\"" + suggestions + "\"]");
}
else
{
    Response.Write("ERROR: " + response.RequestId + Environment.NewLine);
}

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).