Instants Results

Overview

Use the Instant Results to provide results automatically, based on a semantic search as users are typing an input.

By default, every time a user types one of the triggers characters, this sends a query with a maximum of one query every 500 milliseconds. In addition, every user input sends a query, with a maximum of one query every two seconds. This value can be modified in the component options.

Important: The potential number of requests that this components generates may affect your API usage. Increase the debounceTime option to reduce the number of requests.

There are different ways to update the results provided by the component:

  • Link it to a search-box component, which forces the results to update depending on the user activity on that search-box.
  • Update the query with setQuery. If you do this, add an input listener to track the user input.

Usage

Create this component with the following code:

sdk.component('instants-results', target:String, options:Object);

Sample

By default, this component looks like this:

Target

This is an HTML component. For example, the "#inbenta" target looks like this:

<div id="inbenta"></div>

Options

You can configure several options for this component:

Name Type Default Description
categoryId integer or string 0 KM App category ID. When a string, it is the category IDs separated by commas.
length integer 5 Maximum number of items that may be returned in collection. Minimum: 1. Max: 100
showBackButton boolean false Show back button with event 'back'
debounceTime integer 2000 The results are refreshed when the user stop typing for a given amount of time, set in milliseconds. Minimum: 200.
triggers array ['.',',',':',';','(',')','¿','?','¡','!'] When a user type a trigger character, the component is refreshed.

Default options object

{
  categoryId: 0,
  length: 5,
  showBackButton: false,
  contents: { <more info in subcomponent> },
  ratings: { <more info in subcomponent> },
  debounceTime: 2000,
  triggers: ['.',',',':',';','(',')','¿','?','¡','!']
}

Methods

You can use several methods in this component.

Name Description
setQuery(query: String) Set the query parameter to make a search.
getSearchCode() Get the searchCode of the last search.
openContentById(contendId:Integer, doClick:Boolean) Open content by id. doclick true by default.
openContentBySlug(contendSlug:String, doClick:Boolean) Open content by slug. doclick true by default.
linkToSearchBox(component: Component) Link a search-box component to this results component. When the search-box is submitted, the query is changed
linkToAutocompleter(component: Component) Link a typeahead autocomplete component to this results component. When the autocompleter is clicked, the content is loaded.
updateActiveContent(contendId:Integer) Set the contentId parameter as the active content
setContentsDataInterceptor(interceptor:function) Set a contents interceptor.

Subcomponents

This component contains the following configurable sub-components:

Name Description
contents Component to render each content
ratings Component to render search rating

Note: This component has two different ratings: a search rating and a rating inside the contents component. The default configuration is only for search ratings.

Events

Events to listen on this component:

Name Params Description
back Click on the "Back" button
click content: content object clicked Click on Content
expand content: content object expanded Click on expand Content
changed null The component change its results
rateContent data:Object with rating data Click on content ratings
rateSearch data:Object with rating data Click on search rating

Tracking

This component calls the API to do the following:

  • every time a search is performed, it sends a /search request with the type parameter set to instant to get the result of the question and track the search as instant.
  • it triggers the instant_click event when a user clicks on a content.

Labels

These are the labels for this component. You can replace the default labels of each component when you configure the SDK creation.

Name Default Description
RESULTS_TITLE Results: Results title
RESULTS_TEXT* Search results for Results text. Hidden by CSS.
RESULTS_NOT_FOUND_TITLE No results found This label appear as a title when no results are found.
RESULTS_NOT_FOUND_TEXT We’re sorry, but we couldn’t find any answer for your query. This label appear as a text when no results are found.
RESULTS_BACK_BUTTON* Back Text for the button that triggers a "Back" event. Only displayed when back buttom is active.

Examples

  • First example: Create results component linked to search-box;
  • Second example: Create results and upon submission of the myForm form, triggers setQuery from the input to produce the component.
var searchBox = sdk.component('searchBox', '#form');
var instantsResults = sdk.component('instants-results', '#instantsResults');
instantsResults.linkToSearchBox(searchBox);

//or
var instantsResults = sdk.component('instants-results', '#instantsResults');
document.querySelector("#myForm").addEventListener("submit", function(e){
    instantsResults.setQuery(document.getElementById('inbentaInput').value);
});