Input Widget JS

The SearchStax Site Search solution’s Input widget provides the search input field with autosuggest/autocomplete capabilities.

Usage

searchstax.addSearchInputWidget(container, options);

container – The element to render the widget
options – Configuration options (ISearchstaxSearchInputConfig)

Template Override

The input widget template option allows customizing the UI templates.

mainTemplate

Main wrapper template for the input box.

Template model: {} (plain object)
Usage:

templates: {

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

}

autosuggestItemTemplate

Renders each autosuggestion item.

Template model: ISearchstaxSuggestion
Usage:

templates: {
  autosuggestItemTemplate: {
    template: '<div>{{term}}</div>'
  }
}

This renders the input widget with customized templates and hooks for full control over the input behavior and appearance.

Example

searchstax.addSearchInputWidget("searchstax-input-container", {
    suggestAfterMinChars: 3,
    hooks: {
      afterAutosuggest: function (result: ISearchstaxSuggestResponse) {

      },
      beforeAutosuggest: function (props: ISearchstaxSuggestProps) {

      },
    },
    templates: {
    mainTemplate: {
        template: `
        <div class="searchstax-search-input-container">
            <div class="searchstax-search-input-wrapper">
                <input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." />
                <button class="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
            </div>
        </div>
        `,
        searchInputId: "searchstax-search-input"
    }
    autosuggestItemTemplate: {
        template: `
        <div class="searchstax-autosuggest-item-term-container">{{{term}}}</div>
        `,
    }
    },
  });

Questions?

Do not hesitate to contact the SearchStax Support Desk.