Results for: {major}
- - ); -} -``` - -### Custom filtering - -By default, `useComboBoxState` uses the filter function passed to the `defaultFilter` prop (in the above example, a -"contains" function from `useFilter`). The filter function can be overridden by users of the `SearchAutocomplete` component by -using the `items` prop to control the filtered list. When `items` is provided rather than `defaultItems`, `useComboBoxState` -does no filtering of its own. - -The following example makes the `inputValue` controlled, and updates the filtered list that is passed to the `items` -prop when the input changes value. - -```tsx example -function Example() { - let options = [ - {id: 1, email: 'fake@email.com'}, - {id: 2, email: 'anotherfake@email.com'}, - {id: 3, email: 'bob@email.com'}, - {id: 4, email: 'joe@email.com'}, - {id: 5, email: 'yourEmail@email.com'}, - {id: 6, email: 'valid@email.com'}, - {id: 7, email: 'spam@email.com'}, - {id: 8, email: 'newsletter@email.com'}, - {id: 9, email: 'subscribe@email.com'} - ]; - - let {startsWith} = useFilter({sensitivity: 'base'}); - let [filterValue, setFilterValue] = React.useState(''); - let filteredItems = React.useMemo( - () => options.filter((item) => startsWith(item.email, filterValue)), - [options, filterValue] - ); - - return ( -