JavaScript - Results Widget

Updated

The SearchStax Site Search Results Widget for UX-JS displays your search results.

Usage

searchstax.addSearchResultsWidget("searchstax-results-container", {
  renderMethod: "pagination",
  resultsPerPage: 10
});

Props

  • renderMethod – either "pagination" or "infiniteScroll".
  • resultsPerPage – the number of results to display on each page.
  • hooks.afterLinkClick – a callback function that runs when you click a result link. Use it to modify the result object.
  • templates – see examples at searchstax-ux-js.
  • groupedBy – a string containing the field name used to group results. Grouped results support one field at a time.
  • itemsPerGroup – a number that controls how many results are displayed in each group.

Grouped Results

Use groupedBy and itemsPerGroup to display search results in groups based on a field. You don't need to add Solr grouping parameters in a beforeSearch hook.

For example, the following configuration groups results by content_type and displays three results in each group:

searchstax.addSearchResultsWidget("searchstax-results-container", {
  renderMethod: "pagination",
  groupedBy: "content_type",
  itemsPerGroup: 3,
});

When groupedBy is omitted or set to null, results continue to render without grouping. When grouping is enabled, the Results Widget calculates the number of results on a page based on the groups returned and the number of items in each group. resultsPerPage doesn't directly control the number of groups or individual grouped results.

SearchStax Help Center search results grouped by content type, with separate Reference and How to result groups displayed alongside search filters.

Open Results in a New Tab

Use linkTarget to choose where result links open. Set it to _self to open results in the current tab, which is the default behavior. Set it to _blank to open results in a new tab.

Example

See the full examples at searchstax-ux-js.

Articles in this section