Instant Results


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.


This is how you create this component:

sdk.component('instant-results', target: HTMLElement|String, options: Object);


By default, this component looks like this:


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


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.


This component calls the API to do the following:

  • every time a user performs a search, it sends a /federated-searches request with the type parameter 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.


Basic usage

<input type="text" id="query">
<div id="instant-results"></div>

    // The input will trigger instants wether its value is changed.
    var input = document.querySelector('#query');

    var instantResults = sdk.component('instant-results', '#instant-results');

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73