Material-ui 自动完成过滤列表

Posted 2023-02-22

【中文标题】Material-ui 自动完成过滤列表

【英文标题】：Material-ui Autocomplete filtered list

【发布时间】：2020-12-17 13:07:21

【问题描述】：

我在输入时使用 material-ui 自动完成组件我需要向我建议的过滤列表，这些有什么事件吗？

【问题讨论】：

让我更好地理解，您将一组值传递给自动完成，如果您在文本字段上键入，您想根据您编写的内容过滤该数组，对吗？

【参考方案1】：

你需要创建两个数组状态。

假设一个初始选项列表，例如

const initialList = [
  
    name: "item1",
  ,
  
    name: "item2",
  ,
  
    name: "item3",
  ,
  
    name: "item4",
  ,
  
    name: "item5",
  ,
  
    name: "item6",
  ,
  
    name: "item7",
  ,
];

然后，传递给 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 
              />
            )
          />

我在我的项目中使用它