Authorization
API Resources
NL Interpreter
Search
Assist
Instant Results
Overview
This component displays a set of results, based on the query the user is currently typing in a text input field. These results are updated as the user is providing more data into the query.
This component automatically creates a new store for itself.
Usage
This is how you create this component:
sdk.component('instant-results', target: HTMLElement|String, options: Object);Sample
By default, this component looks like this:
Options
The following options can be set in this component:
| Name | Type | Default | Description |
|---|---|---|---|
| results | Object | {} |
The Results component options. This is used to customize how the instant results are rendered. |
| debounceTime | Number | 2000 |
The results are refreshed when the user stop typing for a given amount of time, set in milliseconds. Minimum: 200. |
| triggers | Array | ['.', ',', ':', ';', '(', ')', '¿', '?', '¡', '!'] |
The results are refreshed when users type one of the specified texts in triggers. |
| forceFilters | Array | [] |
Filters to be sent in every request, along with the selected facet refinements. The format in explained in the /federated-search (filters option) in the Search API docs. |
| searchParams | Object | { matchHighlightTags: ['<strong class="inbenta-match">', '</strong>'], correctionHighlightTags: ['<em class="inbenta-correction">', '</em>'], expansionHighlightTags: ['<em class="inbenta-expansion">', '</em>'] } |
The API parameters to send in every request. For the format to use, see the /federated-search endpoint of Search API Routes. Note: API parameters facets and attributes cannot be modified this way. See here for additional details. |
Note about searchParams
You can use the searchParams component option to modify the API search queries. However, some API attributes can be also handled by other linked components. This means that even if you set some searchParams, they may not apply if you are using certain components.
These are the components that may affect this option:
| Component | Affected API attributes |
|---|---|
| Results | offset, length |
| Refinement tabs | attribute, sort |
| Refinement list | attribute, sort |
| Results per page | offset, length |
| Router | filters, query, offset |
| Semantic autocomplete | query, offset, length |
| Sort by selector | sort |
Methods
The following methods can be used in this component:
| Method | Description |
|---|---|
linkToInput(input: HTMLInputElement) |
Listen to the element's input events to trigger queries. |
unlinkFromInput(input: HTMLInputElement) |
Stop listening to the element's input events to trigger queries. |
unlinkAll() |
Stop listening to the all input events to trigger queries. |
Tracking
This component calls the API to do the following:
- every time a user performs a search, it sends a
/federated-searchesrequest with thetypeparameter set to instant (to get the result of the query). - it triggers the instant_click event when the user clicks (left or right-click) on a content.
Examples
Basic usage
<input type="text" id="query">
<div id="instant-results"></div>
<script>
// The input will trigger instants wether its value is changed.
var input = document.querySelector('#query');
var instantResults = sdk.component('instant-results', '#instant-results');
instantResults.linkToInput(input);
</script>