Authorization
API Resources
NL Interpreter
Search
Messenger
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 | Knowledge instance 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
/searchrequest with thetypeparameter 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);