Autocomplete

Autocomplete functionality provides relevant search suggestions to users as they type. Loop54 provides autocomplete query suggestions and also query suggestions with preset facets/ scoped suggestions (normally search in a category). For example the suggestions “orange” and “orange” in category “fruit” could both be examples to the string “or”.

The autocomplete suggestions should be requested for every key press after the user has typed 2 letters with a key press delay of about 50-150ms to avoid flickering when the user is typing longer queries.

A Simple Example

This simple example only considers suggestions without a facet.

// Below is an example of a request - response cycle of an autocomplete request
AutoCompleteRequest request = new AutoCompleteRequest(query);
request.QueriesOptions.Skip = 0;
request.QueriesOptions.Take = 9;
AutoCompleteResponse response = _loop54Client.AutoComplete(request);

var queries = response.Queries.Items.Select(q => q.Query).ToList();

//print out all suggested autocomplete queries
Debug.WriteLine("queries: " + string.Join(", ", queries));

C# source code on Github: AutoCompleteController.cs

// Below is an example of a request - response cycle of an autocomplete request
AutoCompleteRequest request = new AutoCompleteRequest(query);
request.queriesOptions.skip = 0;
request.queriesOptions.take = 9;
AutoCompleteResponse response = loop54Client.autoComplete(request);

List<QueryResult> queryResults = response.queries.items;
List<String> queries = queryResults.stream().map(q->q.query).collect(Collectors.toList());

// print out all suggested autocomplete queries
System.out.println("queries: " + String.join(", ", queries));

Java source code on Github: AutoCompleteController.java

// Below is an example of a request - response cycle of an autocomplete request
var response = client.autoComplete(query, {skip: 0, take:9}).then((r) => {
    var queries = r.data["queries"].items.map(i => i.query);
    //print out all suggested autocomplete queries
    console.log("queries: " + queries.join());
}
);

JavaScript source code on Github: autocomplete.js

/* Request autocompletions for a prefix */
$request = $connector->autocomplete('a')->take(2);

/* Actually perform the request */
$response = $connector->query($request);

echo 'Items starting with prefix:' . PHP_EOL;
/* Print all (unscoped) completions for this prefix */
foreach ($response->getUnscopedResults() as $result) {
echo $result['query'] . PHP_EOL;
}

PHP source code on Github: Simple.php

Handling Scoped suggestions

This example does the same thing as the simple example and it also checks for query suggestions with scoped suggestions. Note that the existence of preset facets in the response are determined by the Loop54 service and not a part of the request. Therefore the existence of scoped queries must be checked for each response.

// Below is an example of a request - response cycle of an autocomplete request
// where scopes are used to provide the user with more context
AutoCompleteRequest request = new AutoCompleteRequest(query);
request.QueriesOptions.Skip = 0;
request.QueriesOptions.Take = 9;
AutoCompleteResponse response = _loop54Client.AutoComplete(request);

//prints out the scoped suggestions
if(response.ScopedQuery != null)
{
    Debug.WriteLine("scoped query: " + response.ScopedQuery.Query);
    Debug.WriteLine("scopes based on: " + response.ScopedQuery.ScopeAttributeName);
    Debug.WriteLine("scopes: " + string.Join(", ", response.ScopedQuery.Scopes));
}

C# source code on Github: AutoCompleteController.cs

// Below is an example of a request - response cycle of an autocomplete request
// where scopes are used to provide the user with more context
AutoCompleteRequest request = new AutoCompleteRequest(query);
request.queriesOptions.skip = 0;
request.queriesOptions.take = 9;
AutoCompleteResponse response = loop54Client.autoComplete(request);

// prints out the scoped suggestions
if(response.scopedQuery != null)
{
  System.out.println("scoped query: " + response.scopedQuery.query);
  System.out.println("scopes based on: " + response.scopedQuery.scopeAttributeName);
  System.out.println("scopes: " + String.join(", ", response.scopedQuery.scopes));
}

Java source code on Github: AutoCompleteController.java

// Below is an example of a request - response cycle of an autocomplete request
// where scopes are used to provide the user with more context
var response = client.autoComplete(query, {skip: 0, take:9}).then((r) => {
    var scopedQuery = r.data["scopedQuery"];
    //prints out the scoped suggestions
    if(scopedQuery)
    {
        console.log("scoped query: " + scopedQuery.query);
        console.log("scopes based on: " + scopedQuery.scopeAttributeName);
        console.log("scopes: " + scopedQuery.scopes.join());
    }
}
);

JavaScript source code on Github: autocomplete.js

echo 'Suggested scopes for most popular result:' . PHP_EOL;
$scopedQuery = $response->getScopedResult();
if ($scopedQuery != null) {
echo $scopedQuery['query'] . ' where '
    . $scopedQuery['scopeAttributeName']
    . ' is one of ' . implode(', ', $scopedQuery['scopes'])
    . PHP_EOL;
}

PHP source code on Github: Simple.php

PreviousSearch NextFaceting

Last updated 5 months ago

Was this helpful?