SearchBox Component

The search box component is where your users type their search queries.

Example


import {
  SearchBox,
  SearchkitComponent
} from "searchkit";

class App extends SearchkitComponent<any, any> {
  render(){
    <div>
      <SearchBox
        searchOnChange={true}
        queryOptions={{analyzer:"standard"}}
        queryFields={["title^5", "languages", "text"]}/>
    </div>
  }
}

Props

  • searchOnChange (Boolean): Optional. Updates search results as you type. Will be false by default.
  • queryFields (Array): Optional. An array of elasticsearch fields to search within. Can specify boosting on particular fields. Will search _all by default.
  • prefixQueryFields (Array): Optional. An array of elasticsearch fields to search within. Can specify boosting on particular fields. Will search _all by default. Will only be used if searchOnChange is true.
  • queryOptions (Object): Optional. An object of options for Query String.
  • mod (string): Optional. A custom BEM container class.
  • translations (Object): An object of translations you wish to override. For more information on translations see translate page.

Translations

  • searchbox.placeholder - "Search"

Demo

See the Pen by searchkit (@searchkit) on CodePen.