Semantic Autocomplete

Overview

Use the Semantic Autocomplete (formerly known as "Semantic Autocompleter") to suggest results based on semantic search while users are typing on an input. By default, the component highlights literal string matching with bold, whereas semantic matching remains in standard formatting 1.

By default, every time a user types one of the triggers characters, this sends a query with a maximum of one query every 200 milliseconds. In addition, every user input sends a query, with a maximum of one query every two seconds. This value can be modified in the component options.

1 Enabled by default on instances created from Dec. 19th 2018 onwards.

Important

The potential number of requests that this components generates may affect your API usage. Increase the debounceTime option to reduce the number of requests.

There are different ways to update the suggestions of the semantic autocomplete:

  • Link it to a search-box component, which forces the autocomplete to update each time the user types something.
  • Update the query with setQuery. if you do this, add an input listener to track the user input.

To perform an action when the user clicks on a suggestion, several options are available:

  • Link a results component to it, which links the results component to the autocomplete clicked suggestion.
  • Listen to the click event, which sends the content id of the clicked suggestion.

Usage

How to create this component:

var semanticAutocompleter = sdk.component('semanticAutocompleter', target:String, options:Object);

Sample

By default, this component looks like this:

(Note how the second result title features speaking, which is semantically related to the search input talking. This is how the semantic autocomplete differs from the regular typeahead autocomplete.)

Target

This is the HTML component. For example, the "#inbenta" target is:

<div id="inbenta"></div>

Options

Available options to set in this component

Name Type Default Description
categoryId integer or string 0 KM App category ID. When a string, it is the category IDs separated by commas.
length integer 5 Maximum number of items that may be returned in collection. Minimum: 1. Max: 100
showBackButton boolean false Show back button with event 'back'
debounceTime integer 1000 The results are refreshed when the user stop typing for debounceTime time in milliseconds. Minimum: 200.
triggers array ['.',',',':',';','(',')','¿','?','¡','!'] When a user type a trigger character, the component is refreshed.

Methods

Methods can be used in this component.

Name Description
setQuery(query: String) Set the query parameter to show contents for that query.
linkToSearchBox(component: Component) Link a search-box component to this results component. When the search-box input changes the query of semantic autocomplete change too.
hide() Hide the component if it is displayed.
setContentsDataInterceptor(interceptor:function) Set a contents interceptor.

Subcomponents

This component does not have any subcomponents.

Events

Events to listen on this component:

Name Params Description
click content: content object clicked Click on Content

Tracking

This component calls the API to do the following:

  • every time a search is performed, it sends a /search request with the type parameter set to instant to get the result of the question and track the search as instant.
  • it triggers the instant_click event when a user clicks on a content.

Examples

The example below shows how you can use the semantic autocomplete to do a search when a user types something into the search box, then show the content in the results component when the user clicks on a component.

// Create components
var searchBox = sdk.component('searchBox', '#search-box', {autofocus:true});
var results = sdk.component('results', '#results');
var semanticAutocompleter = sdk.component('semanticAutocompleter', '#semanticAutocompleter');

// Link the components
semanticAutocompleter.linkToSearchBox(searchBox);
results.linkToSemanticAutocompleter(semanticAutocompleter);
results.linkToSearchBox(searchBox);