Deflection

Overview

Formerly called "Instants", this component can be called either as deflection or instants. This component shows a pop-over with contents according to a search in the input, textarea or select value linked to it. The list of suggested content is dynamic and changes as the user types their query. The query is fragmented by predefined splitters.

This component automatically creates a new store for itself.

Note

You can link the Deflection component to an input, textarea or select HTML element. You can also link the Deflection component to multiple input elements.

Usage

To create this component:

sdk.component('deflection', 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 deflection are rendered.
debounceTime Number 2000 The results are refreshed when users stop typing for the specified debounceTime time (in milliseconds).
triggers Array ['.', ',', ':', ';', '(', ')', '¿', '?', '¡', '!'] The results are refreshed when users type one of the specified texts in triggers.
placement String right The popup placement. See popper.js placements docs for valid values.
modifiers Object The popup modifiers. See popper.js modifiers docs for valid values.
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.
searchParams note

You can use the component option searchParams to modify the API search queries. Nonetheless, some of the API attributes can be also handled by other linked components. This means that even if you set some searchParams, they may not applied 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 search is performed, it sends a /federated-searches request with the type parameter set to contact and trackingset to true, to get the result of the question and track the search as a contact_search event.
  • it logs a contact_start event using the /tracking/events endpoint.
  • it triggers the contact_click event when a user clicks (left or right-click) on a content.

Events

Name Description
show Emitted when the deflection are shown
hide Emitted when the deflection are hidden

Labels

This component uses the following labels:

Name Default Description
INSTANTS_HEADER_TEXT Instant FAQs The heading text

Examples

Automatically search on input change

<input type="text" id="query">

<div id="deflection"></div>

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

    var deflection = sdk.component('deflection', '#deflection');
    deflection.linkToInput(input);
</script>

Use refinements and trigger custom searches

<div id="deflection"></div>

<script>
  const deflection = sdk.component('deflection', '#deflection');
  deflection.searchStore.query = 'cars';
  deflection.searchStore.addFacet('color');
  deflection.searchStore.addFacetRefinement('color', 'blue');
</script>