Developers
Expandable 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('expandable-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 |
| displayLink | Boolean | false |
Defines whether a link to the content URL is displayed at the bottom of the expandable results. |
| 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. See further information about templates here. | |
| 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 apply 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 autocomplete | 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
See further information about templates here.
Item Template
The item template receives a result enhanced with additional parameters. It uses this format:
{
id: 1,
title: "Example content",
highlightedTitle: "<b>Example</b> content",
score: 0.5,
attributes: {
URL: ["/contents/1"],
PARAGRAPHS: ["Paragraph 1"],
},
// Tracking codes
tracking: {
clickCode: "...",
rateCode: "...",
externalCode: "..."
},
// 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 (left or right-click) on a content, this triggers the
clickevent and tracks it through thePOST /tracking/eventsendpoint of the API. - If you enabled ratings, the component triggers the search_rate event when applicable and tracks it through the
POST /tracking/eventsendpoint.
Events
Events to listen on this component.
| Name (data key) | Description |
|---|---|
| click | When a user clicks on a suggestion from the typeahead autocomplete, it triggers a click event. |
Examples
Usage along with SearchBox component
<div id="search-box"></div>
<div id="expandable-results"></div>
<script>
var results = sdk.component('expandable-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('expandable-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('expandable-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('expandable-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('expandable-results', '#results', {
transformData: function (result) {
result.uppercaseTitle = result.title.toUpperCase();
return result;
},
templates: {
item: '<div>{{ uppercaseTitle }}</div>'
}
});
results.searchStore.query = 'my query';
</script>