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.
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.
To create this component:
sdk.component('deflection', 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 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. |
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 |
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:
/federated-searches
request with the type
parameter set to contact to get the result of the question and track the search as a contact_search event./tracking/events
endpoint.Name | Description |
---|---|
show | Emitted when the deflection are shown |
hide | Emitted when the deflection are hidden |
This component uses the following labels:
Name | Default | Description |
---|---|---|
INSTANTS_HEADER_TEXT | Instant FAQs |
The heading text |
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>