Results

Overview

This component displays the list of results obtained from a search. This component provides several tools to modify how the results are displayed and what information is relevant to be shown.

This component automatically creates a new store for itself.

Usage

This is how you create this component:

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

Sample

By default, this component looks like this:

Options

The following options can be set in this component:

Name Type Default Description
attributes Array [ 'BEST_DYNABS' ] The name of the attributes to display. The label "BEST_DYNABS" refers to the dynamically generated abstract.
baseUrl String "" URL to add to all of the result links
forceFilters Array [] Filters to send in every request, along with the selected facet refinements. For the format to use, see the /federated-search endpoint of the Search API Routes.
ratings Array [] The array of rating options
ratings.*.id Number The rating ID
ratings.*.label String The text to display within the rating button
ratings.*.comment Boolean false Whether the rating requires a comment
resultsPerPage Number 10 The number of results to display
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.
templates Object The templates to override the default render behavior
templates.item String | (Object) => String Template to use for each result. This template will receive an object containing the result. See here for additional details.
templates.header String | () => String Header template
templates.footer String | () => String Footer template
title String highlightedTitle The name of the attribute to display as the title. It can take the value title, highlightedTitle or any attribute name. If the attribute does not exist or has no value, highlightedTitle will be taken as the default value. If the attribute has multiple objects, the value taken will be the first one.
transformData Function (object) => object Function to transform the object passed to the view
searchParams note

The component option searchParams is useful for modifying 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 autocompleter query, offset, length
Sort by selector sort

Methods

The following methods can be used in this component:

Name Description
linkTo(component: Component) Components are visual representation of a search store instance (and they enable interaction with the user).

When components are created using the sdk.build method, they are automatically linked, however this is not the case when you manually create components.

The results component always contains a fresh search store, and you must use this method to share it with the other components.
getSearchCode() : String This method returns the search code from the current search.

Templates

Item Template

The item template receives a result enhanced with additional parameters. It uses this format:

{
  id: 1,
  title: "Example content",
  attributes: {
    URL: ["/contents/1"],
    PARAGRAPHS: ["Paragraph 1"],
  },
  // Use this to render the absolute content URL.
  __url: "https://test.io/contents/1",
  // Render this into an HTML element to track click events.
  __clickable: "..."
}

Tracking

  • When a user performs a search, the component binds the search to the session.
  • When a user clicks on a content, this triggers the click event and tracks it through the POST /tracking/events endpoint of the API.
  • If you enabled ratings, the component triggers the search_rate event when applicable and tracks it through the POST /tracking/events endpoint.

Events

Events to listen on this component.

Name (data key) Description
click When a user clicks on a suggestion from the autocompleter, it triggers a click event.

Examples

Usage along with SearchBox component
<div id="search-box"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results', {
    resultsPerPage: 5,
    attributes: ['BEST_DYNABS', 'URL']
  });

  var searchBox = sdk.component('search-box', '#search-box');
  results.linkTo(searchBox);
</script>
Display ratings
<div id="search-box"></div>
<div id="results"></div>

<script>
    var results = sdk.component('results', '#results', {
        resultsPerPage: 5,
        attributes: ['BEST_DYNABS', 'URL'],
        ratings: [
            {
                id: 1,
                label: 'Yes',
                comment: false,
            },
            {
                id: 2,
                label: 'No',
                comment: true,
            },
        ],
    });

    var searchBox = sdk.component('search-box', '#search-box');
    results.linkTo(searchBox);
</script>
Programatically changing the query
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results', {
    resultsPerPage: 5,
    attributes: ['BEST_DYNABS', 'URL']
  });

  results.searchStore.query = 'my query';
</script>
Using templates
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results', {
    resultsPerPage: 5,
    templates: {
      header: 'Search Results',
      // Note that the __clickable parameter must
      // be rendered using triple brackets.
      item: '<a href="{{ __url }}" {{{ __clickable }}}>'
        + '{{ title }} ({{ id }})'
        + '</a>'
        + '<p>{{ attributes.PARAGRAPHS }}</p>'
    }
  });

  results.searchStore.query = 'my query';
</script>
Using transformData and templates
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results', {
    transformData: function (result) {
      result.uppercaseTitle = result.title.toUpperCase();
      return result;
    },
    templates: {
      item: '<div>{{ uppercaseTitle }}</div>'
    }
  });

  results.searchStore.query = 'my query';
</script>