Takeover Search Input Widget

The Takeover Search Input widget allows users to inject Search.io search experience into an existing search input field while keeping the current appearance.

Takeover Search Input Widget

See the example in Codesandbox.

Configuration

The following options can be configured when creating the takeover search input widget.

Name	Type	Default	Description
selector	string	'form[action="/search"] input[name="q"]' if the preset is 'shopify'	The CSS selector of the input being taken over.
mode	'standard' | 'typeahead' | 'suggestions' | 'results'	'results'	The mode of the input. For details, see Input props.
omittedElementSelectors	string | string[]	_	A single or a list of CSS selector of elements to be removed when the widget has mounted.

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

See the example in Codesandbox.