Developer Guide
Product DocumentationDeveloper GuideAPI ReferenceHelp Center
  • Welcome!
  • Fundamentals
    • API and client libraries
      • REST API Reference
      • JavaScript
      • Node
      • PHP
      • Python
      • Ruby
      • .Net
    • Search UI widgets
      • Search results widget
      • Search input widget
      • Takeover Search Input Widget
      • Configuration Objects
    • Pipelines
      • Steps
      • Record Pipelines
      • Query pipelines
      • Fundamental steps
      • Variable manipulation
  • Guides
    • Quick Start
      • Setting up a collection
      • Tuning your search
    • Feature implementation
      • Implementing tracking
      • Promotion banners
      • Aggregate Filters
      • Bucket Aggregates
      • Redirects
    • Using pipelines
      • Configuring autocomplete
      • Configuring spelling
      • Phrase training
      • Regular expressions
  • Helpful links
    • Product Documentation
    • API Reference
    • Help Center
Powered by GitBook
On this page

Was this helpful?

  1. Fundamentals
  2. Search UI widgets

Search input widget

PreviousSearch results widgetNextTakeover Search Input Widget

Last updated 2 years ago

Was this helpful?

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.

See the example in .

Configuration

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

Name
Type
Default
Description

mode

'standard' | 'typeahead' | 'suggestions' | 'results'

'suggestions'

redirect

{url: string, queryParamName: string}

{url: 'search', queryParamName: 'q'}

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

The mode of the input. For details, see .

Options to set the redirect URL and the name of the search query param, normally, the destination is where the is located.

Input props
Search Results Widget
Codesandbox
Search input widget