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

<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

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