Upon receiving the query from a search box, this component calls the API to send a /search request.


Create this component with the following code:

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


By default, this component looks like this:


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

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


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'
openUniqueContent boolean false When a search returns only one content, this content opens and a click is tracked.

Default options object

  categoryId: 0,
  length: 5,
  showBackButton: false,
  contents: { <more info in subcomponent> },
  ratings: { <more info in subcomponent> }


Methods can be used 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.
setContents(contents) This method allows to populate the component with any array of contents desired. Contents object passed to the method has to have the same structure that the result obtained from the Inbenta KM API contents routes
setRelatedDataInterceptor(interceptor:function) Set a related interceptor.


This component contains the following sub-components that you can configure:

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

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 to listen on this component:

Name Params Description
back null Sent whether the back button is clicked
click content: Content object Sent whether a content is clicked
expand content: Content object Sent whether a content is expanded1
changed searchData: Object with the search data returned by the API Sent when results change
relatedClick integer: Related content id Sent whether a related content is clicked
decisionTreeClick decisionTree: Decision tree object Sent whether a decision tree content is clicked
rateContent rating: Rating object Sent whether a content rating is clicked
rateSearch rating: Rating object Sent whether a search rating is clicked

1 Contents that open automatically are expanded by default and cannot be contracted. This happens with the option openUniqueContent and returns only one result, or when the component calls the openContentBySlug and openContentById methods.


This component calls the API to do the following:

  • every time a search is performed, it sends a /search request to get the result of the question with the tracking option set to true.
  • when a user clicks on a result, it sends a click event using the /tracking/events endpoint.

A click is automatically tracked when the component is already opened because there is only one result and either

  • the openUniqueContent option is set to true, OR
  • it is forced by methods like openContentById or openContentBySlug


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.


  • First example: Create results component linked to search-box.
var searchBox = sdk.component('searchBox', '#form');
var results = sdk.component('results', '#results');
  • Second example: Create results and upon submission of the myForm form, triggers setQuery from the input to produce the component.
var results = sdk.component('results', '#results');
document.querySelector("#myForm").addEventListener("submit", function(e){
  • Third example: Create results component linked to search-box with ratings.
var searchBox = sdk.component('searchBox', '#form');
var results = sdk.component('results', '#results', {
    ratings: {
    labels: {
        "RATINGS_INTRODUCTION": "Are these results relevant?",
            "RATINGS_COMMENT_INTRODUCTION": "Why these results are not relevant?"
                label: 'Yes',
                comment: false
                label: 'No',
                comment: true
  • Fourth example: Populate results with contents obtained from the API.
var results = sdk.component('results', '#results', {});
sdk.client.getContentsById('2,14,10').then(function(response) {