I'm using material UI Autocomplete field in my React application and I want the search in it to work only from the beginning of the keyword (for some fields of the objects):
For example, if the options are
[
{data1:'abc', data2:'a123'},
{data1:'cba', data2:'345'},
{data1:'bca3', data2:'654'}
]
and I type a - only the first option should appear.
If I type 3 - only the second option should appear.
I'd like to add some extra infos about filtering. You can also use the createFilterOptions provided from the MUI Autocomplete.
Example:
import { createFilterOptions } from '@material-ui/lab/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: option => option.title,
});
<Autocomplete filterOptions={filterOptions} />
You can set some optional filters:
https://material-ui.com/components/autocomplete/
Hope this could help someone!
Made it work with filterOptions Autocomplete prop and 'match-sorter' library:
const filterOptions = (options,{ inputValue }) =>
matchSorter(options, inputValue, {
keys: [
{ threshold: matchSorter.rankings.STARTS_WITH, key: 'data1' },
{ threshold: matchSorter.rankings.STARTS_WITH, key: 'data2' },
'data3',
],
});
https://material-ui.com/components/autocomplete/#multiple-values
It works, You need to add multiple
<Autocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>