如何为Material-UI的Autocomplete组件添加子标题？

我当前用以下代码实现Material-UI的Autocomplete组件：

<Autocomplete
        {...props}
        options={options}
        renderInput={(params) => <TextField {...params} label={label} />}
/>

当前效果为普通下拉选择，期望选中选项后以可删除的芯片（Chip）形式展示在输入框内，且支持继续选择更多选项。请问如何实现该需求？

解决方案 #

要达到你想要的效果，只需要给Autocomplete开启多选模式，再把选中的选项改成芯片样式展示就行，具体修改如下：

• 添加multiple属性开启多选功能
• 通过renderTags属性自定义选中项为Chip组件，自带删除交互
• 根据你的options结构调整芯片显示的文本

修改后的完整代码示例：

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

<Autocomplete
  {...props}
  multiple
  options={options}
  renderTags={(selectedOptions, getTagProps) =>
    selectedOptions.map((option, index) => (
      <Chip
        key={option.id || index}
        label={option.label || option}
        {...getTagProps({ index })}
      />
    ))
  }
  renderInput={(params) => (
    <TextField {...params} label={label} placeholder="请选择" />
  )}
/>

细节说明 #

• 如果options是纯字符串数组，option.label || option直接替换成option即可
• 若要调整芯片样式，可给Chip组件添加color="primary"、size="small"属性，或用sx自定义样式
• getTagProps已内置删除选中项的逻辑，无需额外编写删除事件

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