Filtering.md

Filtering

By default, the component will filter results based on a case-insensitive string match between the input string and the labelKey property of each option (or the option itself, if an array of strings is passed). You can customize the filtering a few ways:

caseSensitive

Setting to true changes the string match to be, you guessed it, case-sensitive. Defaults to false.

<Typeahead
  ...
  caseSensitive
/>

ignoreDiacritics

By default, the component ignores accents and other diacritical marks when performing string matches. Set this prop to false to override that setting and perform a strict match.

<Typeahead
  ...
  ignoreDiacritics={false}
/>

filterBy

The filterBy prop can be used in one of two ways: to specify option properties that should be searched or to pass a completely custom callback.

Array

By default, the filtering algorithm only searches the field that corresponds to labelKey. However, you can pass an array of additional fields to search:

<Typeahead
  ...
  filterBy={['firstName', 'lastName', 'email']}
/>

The field corresponding to labelKey is always searched (once), whether or not you specify it.

Callback (filterBy(option, text))

You can also pass your own callback to take complete control over how the filtering works. Note that the caseSensitive and ignoreDiacritics props will be ignored in this case, since you are now completely overriding the algorithm. The callback receives the option and the current input value as arguments.

<Typeahead
  ...
  filterBy={(option, text) => {
    /* Your own filtering code goes here. */
  }}
/>

Next: Rendering