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:
||The Results component options. This is used to customize how the instant results are rendered.|
||The results are refreshed when the user stop typing for a given amount of time, set in milliseconds. Minimum: 200.|
||The results are refreshed when users type one of the specified texts in triggers.|
||Filters to be sent in every request, along with the selected facet refinements. The format in explained in the
||The API parameters to send in every request. For the format to use, see the
Note: API parameters
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 per page||
|Sort by selector||
The following methods can be used in this component:
||Listen to the element's input events to trigger queries.|
||Stop listening to the element's input events to trigger queries.|
||Stop listening to the all input events to trigger queries.|
This component calls the API to do the following:
/federated-searchesrequest with the
typeparameter set to instant (to get the result of the query) and the
trackingset to true (to track the search as a instant_search event).
<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>