Search input widget

The search input widget is typically used in a global template and positioned in the header of the page. It renders a search input field as well as search suggestions, depending on the mode.

Search input widget

See the example in Codesandbox.

Configuration

The following options can be configured when creating the Search Input Widget.

Name	Type	Default	Description
mode	'standard' | 'typeahead' | 'suggestions' | 'results'	'suggestions'	The mode of the input. For details, see Input props.
redirect	{url: string, queryParamName: string}	{url: 'search', queryParamName: 'q'}	Options to set the redirect URL and the name of the search query param, normally, the destination is where the Search Results Widget is located.

<div data-widget="search-input">
  <script type="application/json">
    {
      "account": "1594153711901724220",
      "collection": "bestbuy",
      "pipeline": "query",
      "selector": "#search-input",
      "mode": "suggestions",
      "redirect": {
        "url": "search.html",
        "queryParamName": "q"
      }
    }
  </script>
</div>
<script async src="https://cdn.search.io/embed/1/loader.js"></script>