嘿，这个需求我之前开发的时候正好碰到过！要让多选模式下的Autocomplete不再展示已选中的选项，核心是利用组件的filterOptions属性来自定义过滤逻辑，把已经被选中的选项从下拉列表里排除掉。

具体实现思路 #

默认情况下，Material UI的Autocomplete不会自动过滤已选中项，所以我们需要重写filterOptions函数：

• 自定义过滤函数，接收原始选项列表和组件的状态（其中包含已选中的选项集合）
• 过滤掉状态中已选中的选项，返回剩下的选项作为新的下拉列表数据源

完整代码示例 #

下面是一个包含多选模式、自定义过滤逻辑，以及选中项Chip展示的函数组件示例：

import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';

// 示例选项（对象类型）
const options = [
  { label: '选项A', id: 1 },
  { label: '选项B', id: 2 },
  { label: '选项C', id: 3 },
  { label: '选项D', id: 4 },
];

export default function MultiSelectAutocomplete() {
  return (
    <Autocomplete
      multiple
      id="multiselect-hidden-selected"
      options={options}
      // 自定义过滤逻辑：移除已选中的选项
      filterOptions={(options, { selected }) => {
        // 针对对象类型选项，用唯一id做对比
        return options.filter(option => !selected.some(item => item.id === option.id));
      }}
      getOptionLabel={(option) => option.label}
      // 渲染选中的标签为Chip组件
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip key={option.id} label={option.label} {...getTagProps({ index })} />
        ))
      }
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          label="多选示例"
          placeholder="选择选项"
        />
      )}
    />
  );
}

不同选项类型的适配说明 #

• 如果你的选项是纯字符串类型（比如['选项A', '选项B']），过滤逻辑可以简化为：

  filterOptions={(options, { selected }) => options.filter(option => !selected.includes(option))}
  

• 如果选项是对象，一定要用唯一标识（比如id、key）来做对比，不能直接用对象引用判断，因为即使内容相同，不同的对象引用会被视为不同项

这样配置之后，当你选中某个选项，它就会自动从下拉列表里消失，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Harsh Agarwal