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-searches request with the type parameter set to instant (to get the result of the query) and the tracking set to true (to track the search as a instant_search event).
  • 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>