Results Widget JS

The SearchStax Site Search solution’s Results Widget for UX-JS displays the search results.

Usage

1
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:
1
2
3
4
5
6
7
8
9
10
11
templates: {
 
  mainTemplate: {
    template: `
      <div class="results-wrap">
        <div id="results"></div>
      </div>
    `
  }
 
}

searchResultTemplate

Template for each individual search result.

1
2
3
4
5
6
7
8
9
10
11
12
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
templates: {
 
  noSearchResultTemplate: {
    template: `
      <div>
        No results found for <b>{{searchTerm}}</b>.
 
        {{#spellingSuggestion}}
          Did you mean <b>{{spellingSuggestion}}</b>?
        {{/spellingSuggestion}}
      </div>
    `
  }
 
}

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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.