reactjsmaterial-uiautocomplete

Material UI Autocomplete filtered list


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?


Solution

  • 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