SearchstaxInputWidget for React and Next.js

SearchStax Site Search solution offers React and Next.js widgets to assist in building your custom search page.

The SearchstaxInputWidget component provides a search input with autosuggest/autocomplete functionality.

Usage

1
2
3
4
5
<SearchstaxInputWidget
  afterAutosuggest={afterAutosuggest}
  beforeAutosuggest={beforeAutosuggest}
  suggestAfterMinChars={3}
/>

Props

  • afterAutosuggest – Callback function invoked after autosuggest results are received. Allows modifying the suggestions.
  • beforeAutosuggest – Callback function invoked before making the autosuggest API call. Allows modifying the request parameters.
  • searchInputId – ID of the search input element. Default: "searchstax-search-input"
  • suggestAfterMinChars – Minimum number of characters required to trigger autosuggest. Default: 3

inputTemplate

The inputTemplate prop allows customizing the input UI.

It receives the following props:

  • suggestions – Array of autosuggestion results
  • onMouseLeave – Handler for mouse leave event
  • onMouseOver – Handler for mouse over event
  • onMouseClick – Handler for mouse click event

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
  <div
    className={`searchstax-autosuggest-container ${suggestions.length === 0 ? 'hidden' : ''}`}
    onMouseLeave={onMouseLeave}
  >
    {suggestions.map(suggestion => (
      <div
        className="searchstax-autosuggest-item"
        key={suggestion.term}
        onMouseOver={() => onMouseOver(suggestion)}
        onClick={onMouseClick}
      >
        <div
          className="searchstax-autosuggest-item-term-container"
          dangerouslySetInnerHTML={{__html: suggestion.term}}
        />
      </div>
    ))}
  </div>
 
  <button
    className="searchstax-spinner-icon"
    id="searchstax-search-input-action-button"
  />
</div>
)}
/

Questions?

Do not hesitate to contact the SearchStax Support Desk.