Input Widget JS

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

Usage

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

autosuggestItemTemplate

Renders each autosuggestion item.

1
2
3
4
5
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

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
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.