Authorization
API Resources
NL Interpreter
Search
Assist
Instants Results
Overview
Use the Instant Results to provide results automatically, based on a semantic search as users are typing an input.
By default, every time a user types one of the triggers characters, this sends a query with a maximum of one query every 500 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.
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 results provided by the component:
- Link it to a search-box component, which forces the results to update depending on the user activity on that search-box.
- Update the query with
setQuery. If you do this, add an input listener to track the user input.
Usage
Create this component with the following code:
sdk.component('instants-results', target:String, options:Object);Sample
By default, this component looks like this:
Target
This is an HTML component. For example, the "#inbenta" target looks like this:
<div id="inbenta"></div>Options
You can configure several options for 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 | 2000 | The results are refreshed when the user stop typing for a given amount of time, set in milliseconds. Minimum: 200. |
| triggers | array | ['.',',',':',';','(',')','¿','?','¡','!'] | When a user type a trigger character, the component is refreshed. |
Default options object
{
categoryId: 0,
length: 5,
showBackButton: false,
contents: { <more info in subcomponent> },
ratings: { <more info in subcomponent> },
debounceTime: 2000,
triggers: ['.',',',':',';','(',')','¿','?','¡','!']
}Methods
You can use several methods in this component.
| Name | Description |
|---|---|
setQuery(query: String) |
Set the query parameter to make a search. |
getSearchCode() |
Get the searchCode of the last search. |
openContentById(contendId:Integer, doClick:Boolean) |
Open content by id. doclick true by default. |
openContentBySlug(contendSlug:String, doClick:Boolean) |
Open content by slug. doclick true by default. |
linkToSearchBox(component: Component) |
Link a search-box component to this results component. When the search-box is submitted, the query is changed |
linkToAutocompleter(component: Component) |
Link a typeahead autocomplete component to this results component. When the autocompleter is clicked, the content is loaded. |
updateActiveContent(contendId:Integer) |
Set the contentId parameter as the active content |
setContentsDataInterceptor(interceptor:function) |
Set a contents interceptor. |
setRelatedDataInterceptor(interceptor:function) |
Set a related interceptor. |
Subcomponents
This component contains the following configurable sub-components:
| Name | Description |
|---|---|
| contents | Component to render each content |
| ratings | Component to render search rating |
Note
This component has two different ratings: a search rating and a rating inside the contents component. The default configuration is only for search ratings.
Events
Events to listen on this component:
| Name | Params | Description |
|---|---|---|
| back | null |
Sent whether the back button is clicked |
| click | content: Content object |
Sent whether a content is clicked |
| expand | content: Content object |
Sent whether a content is expanded |
| changed | null |
Sent when results change |
| relatedClick | integer: Related content id |
Sent whether a related content is clicked |
| decisionTreeClick | decisionTree: Decision tree object |
Sent whether a decision tree content is clicked |
| rateContent | rating: Rating object |
Sent whether a content rating is clicked |
| rateSearch | rating: Rating object |
Sent whether a search rating is clicked |
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.
Labels
These are the labels for this component. You can replace the default labels of each component when you configure the SDK creation.
| Name | Default | Description |
|---|---|---|
| RESULTS_TITLE | Results: |
Results title |
| RESULTS_TEXT* | Search results for |
Results text. Hidden by CSS. |
| RESULTS_NOT_FOUND_TITLE | No results found |
This label appear as a title when no results are found. |
| RESULTS_NOT_FOUND_TEXT | We’re sorry, but we couldn’t find any answer for your query. |
This label appear as a text when no results are found. |
| RESULTS_BACK_BUTTON* | Back |
Text for the button that triggers a "Back" event. Only displayed when back buttom is active. |
Examples
- First example: Create results component linked to search-box;
- Second example: Create results and upon submission of the
myFormform, triggerssetQueryfrom the input to produce the component.
var searchBox = sdk.component('searchBox', '#form');
var instantsResults = sdk.component('instants-results', '#instantsResults');
instantsResults.linkToSearchBox(searchBox);
//or
var instantsResults = sdk.component('instants-results', '#instantsResults');
document.querySelector("#myForm").addEventListener("submit", function(e){
instantsResults.setQuery(document.getElementById('inbentaInput').value);
});