1 | # Filtering
|
2 | 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:
|
3 |
|
4 | ### `caseSensitive: boolean` (default: `false`)
|
5 | Setting to `true` changes the string match to be, you guessed it, case-sensitive. Defaults to `false`.
|
6 | ```jsx
|
7 | <Typeahead
|
8 | ...
|
9 | caseSensitive
|
10 | />
|
11 | ```
|
12 |
|
13 | ### `ignoreDiacritics: boolean` (default: `true`)
|
14 | 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.
|
15 | ```jsx
|
16 | <Typeahead
|
17 | ...
|
18 | ignoreDiacritics={false}
|
19 | />
|
20 | ```
|
21 |
|
22 | ### `filterBy`
|
23 | The `filterBy` prop can be used in one of two ways: to specify `option` properties that should be searched or to pass a custom callback.
|
24 |
|
25 | #### `Array<string>`
|
26 | By default, the filtering algorithm only searches the field that corresponds to `labelKey`. However, you can pass an array of additional fields to search:
|
27 | ```jsx
|
28 | <Typeahead
|
29 | ...
|
30 | filterBy={['firstName', 'lastName', 'email']}
|
31 | />
|
32 | ```
|
33 | The field corresponding to `labelKey` is always searched (once), whether or not you specify it.
|
34 |
|
35 | #### `(option: Object|string, props: Object) => boolean`
|
36 | 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.
|
37 |
|
38 | ```jsx
|
39 | <Typeahead
|
40 | ...
|
41 | filterBy={(option, props) => {
|
42 | /* Your own filtering code goes here. */
|
43 | }}
|
44 | />
|
45 | ```
|
46 | You can disable filtering completely by passing a function that returns `true`:
|
47 |
|
48 | ```jsx
|
49 | <Typeahead
|
50 | ...
|
51 | filterBy={() => true}
|
52 | />
|
53 | ```
|
54 |
|
55 | [Next: Rendering](Rendering.md)
|