I'm using Material UI autocomplete component when I'm typing I need the filtered list which is suggested to me, is there any event for these?
you need to create two arrays state.
assuming an initial options list, like
const initialList = [
{
name: "item1",
},
{
name: "item2",
},
{
name: "item3",
},
{
name: "item4",
},
{
name: "item5",
},
{
name: "item6",
},
{
name: "item7",
},
];
then, pass to useState,
const [itemList, setItemList] = useState(initialList);
const [itemSelected, setItemSelected] = useState([]);
const handleChange = () => (event, value) => {
setItemSelected(value);
}
<Autocomplete
multiple
id='items-outlined'
value={itemSelected}
options={itemList}
getOptionLabel={(option) => option.name}
getOptionSelected={(option, value) => option.name === value.name}
onChange={handleChange()}
filterSelectedOptions
fullWidth
renderInput={(params) => (
<TextField
{...params}
variant='outlined'
label='Items'
placeholder='Select items...'
fullWidth
InputLabelProps={{ shrink: true }}
/>
)}
/>
I'm using it in my projects