Overview

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

This component has 2 subcomponents, “contents” and “ratings”. When you add the “ratings” subcomponent directly to the results component, it adds a search rating and a rating inside the “contents” component. When you add the “ratings” subcomponent to the “contents” subcomponent, it adds a rating option only to the content.

Usage

Create this component with the following code:

sdk.component('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:

Default options object

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

Methods

Methods that can be used in this component.

Subcomponents

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

Events

Events to listen on this component:

¹ 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.

Tracking

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

Labels

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

Examples

• First example: Create results component linked to search-box.

var searchBox = sdk.component('searchBox', '#form');
var results = sdk.component('results', '#results');
results.linkToSearchBox(searchBox);

• 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){
    results.setQuery(document.getElementById('inbentaInput').value);
});

• 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?"
    },
        elements:[
            {
                id:1,
                label: 'Yes',
                comment: false
            },
            {
                id:2,
                label: 'No',
                comment: true
            }
        ]
    },
});
results.linkToSearchBox(searchBox);

• Fourth example: Create results component with ratings only in the “contents” subcomponent.

var results = sdk.component('results', '#results', {
    contents: {
      ratings: {
        elements: [
          {
            id: 1,
            label: 'Yes',
            comment: false
          },
          {
            id: 2,
            label: 'No',
            comment: true
          }
        ]
      }
    }
  });

• Fifth example: Populate results with contents obtained from the API.

var results = sdk.component('results', '#results', {});
sdk.client.getContentsById('2,14,10').then(function(response) {
    results.setContents(response.data);
});