Search Feedback Widget JS

Displays search feedback and stats for UX-JS.

Usage

searchstax.addSearchFeedbackWidget(container, options);
  • container – Element to render widget into
  • options – Configuration options (Read more)

Multiple Instances

Multiple instances of the SearchFeedback widget can be added by calling the addSearchFeedbackWidget method multiple times with different target containers:

searchstax.addSearchFeedbackWidget('container1', options1);

searchstax.addSearchFeedbackWidget('container2', options2);

Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.

Template Override

The searchFeedback widget template option allows customizing the UI templates.

mainTemplate

Main template for the search feedback message.

templates: {

  main: {
    template: `
      <div class="search-feedback">

        Showing <b>{{startIndex}} - {{endIndex}}</b> of <b>{{totalResults}}</b> results for <b>{{searchTerm}}</b>

        <div class="searchstax-feedback-container-suggested">
                  {{#autoCorrectedQuery}}
                    Search instead for <a href="#" class="searchstax-feedback-original-query">{{originalQuery}}</a>
                  {{/autoCorrectedQuery}}
                </div>

      </div>
    `
  }

}

The ISearchstaxSearchFeedbackData interface provides search metadata to use in the template.

Example

searchstax.addSearchFeedbackWidget('search-feedback-container', {

  templates: {

    main: {
      template: `
        <div class="feedback">
          Showing X-Y of Z results for "<query>"
          
          <a class="original-query">Did you mean <b>original</b>?</a> 
        </div>
      `,
      originalQueryClass: 'original-query'
    }

  }

});

Questions?

Do not hesitate to contact the SearchStax Support Desk.