Results Widget JS

The Results Widget for UX-JS displays the search results.

Usage

searchstax.addSearchResultsWidget(container, options);

Template Override

The result widget template option allows customizing the UI templates.

mainTemplate

Main wrapper template for the results section.

  • Template model: {} (plain object)
  • Usage:
templates: {

  mainTemplate: {
    template: `
      <div class="results-wrap">
        <div id="results"></div>
      </div>
    `
  }

}

searchResultTemplate

Template for each individual search result.

templates: {

  searchResultTemplate: {
    template: `
      <div class="result">
        <h3>{{title}}</h3>
        <p>{{description}}</p>
      </div>
    `
  }

}

noSearchResultTemplate

Template shown when there are no results.

  • Template model:
    • spellingSuggestion – Suggested spelling correction
    • searchTerm – Search term used
  • Usage:
templates: {

  noSearchResultTemplate: {
    template: `
      <div>
        No results found for <b>{{searchTerm}}</b>.

        {{#spellingSuggestion}}
          Did you mean <b>{{spellingSuggestion}}</b>?
        {{/spellingSuggestion}}
      </div>
    `
  }

}

Example

searchstax.addSearchResultsWidget('results', {

  templates: {

    mainTemplate: {
      template: `
        <div id="results-container"></div>
      `,
      searchResultsContainerId: 'results-container'
    },

    searchResultTemplate: {
      template: `
        <div class="result">
          <a href="{{url}}" data-id="{{id}}"></a>
          <!-- result content -->
        </div>
      `,
      searchResultUniqueIdAttribute: 'data-id'
    },

    noSearchResultTemplate: {
      template: `
        <div>No results found.</div>
      `
    }

  },

  hooks: {
    afterLinkClick: (result) => {
      // handle click
    }
  }

});

This renders the results widget using custom templates and hooks for handling search result clicks.

Questions?

Do not hesitate to contact the SearchStax Support Desk.