Widgets SearchBox

Description

The SearchBox component displays a search box that lets the user search for a specific query.

Props

focusShortcuts
type: string[]default: ['s','/']

List of keyboard shortcuts that focus the search box. Accepts key names and key codes.

autoFocus
type: booleandefault: false

Should the search box be focused on render?

searchAsYouType
type: booleandefault: true

Should we search on every change to the query? If you disable this option, new searches will only be triggered by clicking the search button or by pressing the enter key while the search box is focused.

onSubmit
type: function 

Intercept submit event sent from the SearchBox form container.

onReset
type: function 

Listen to reset event sent from the SearchBox form container.

on*
type: function 

Listen to any events sent from the search input itself.

submit
type: node 

Change the apparence of the default submit button (magnifying glass).

reset
type: node 

Change the apparence of the default reset button (cross).

loadingIndicator
type: node 

Change the apparence of the default loading indicator (spinning circle).

defaultRefinement
type: string 

Provide default refinement value when component is mounted.

showLoadingIndicator
type: booleandefault: false

Display that the search is loading. This only happens after a certain amount of time to avoid a blinking effect. This timer can be configured with stalledSearchDelay props on . By default, the value is 200ms.

Example usage

import React from 'react'; import { InstantSearch, SearchBox } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <SearchBox /> </InstantSearch> );

CSS classes

.ais-SearchBox {}

the root div of the widget

.ais-SearchBox-form {}

the wrapping form

.ais-SearchBox-input {}

the search input

.ais-SearchBox-submit {}

the submit button

.ais-SearchBox-submitIcon {}

the default magnifier icon used with the search input

.ais-SearchBox-reset {}

the reset button used to clear the content of the input

.ais-SearchBox-resetIcon {}

the default reset icon used inside the reset button

.ais-SearchBox-loadingIndicator {}

the loading indicator container

.ais-SearchBox-loadingIcon {}

the default loading icon

Translation keys

submitTitle

The submit button title

resetTitle

The reset button title

placeholder

The label of the input placeholder