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);


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.

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.