MUI Autocomplete组件如何内联同时渲染选项的name与id属性

问题原因 #

默认配置下，Autocomplete 下拉选项的渲染文本直接取getOptionLabel返回值，现有代码中getOptionLabel仅返回了option.name，且没有自定义下拉项渲染逻辑，因此下拉框只会展示name字段。

修复方案 #

通过组件提供的renderOption属性自定义下拉选项的渲染结构，即可在同一行内同时展示name与id字段，原有getOptionLabel保留即可（该属性控制选中后输入框内的显示文本）。

完整修复代码 #

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

interface IZoneID {
  id: number;
  name: string;
}

export const zoneUserId: IZoneID[] = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B' },
];

export default function UserIdSelect() {
  const listZoneId = {
    options: zoneUserId,
    // 控制选中状态下输入框内的显示文本，可按需调整
    getOptionLabel: (option: IZoneID) => option.name,
    // 自定义下拉选项渲染结构
    renderOption: (props, option: IZoneID) => (
      <li {...props}>
        <span>{option.name}</span>
        <span style={{ marginLeft: 8, color: '#6b7280' }}>（ID: {option.id}）</span>
      </li>
    )
  };

  return (
    <Autocomplete
      {...listZoneId}
      id="zoneUserId"
      includeInputInList
      sx={{ width: 200 }}
      renderInput={(params) => (
        <TextField {...params} label="User ID" variant="standard" />
      )}
    />
  );
}

注意事项 #

• renderOption的根节点必须使用<li>标签，且必须透传传入的props参数，否则会丢失键盘导航、选项高亮、点击选中这些内置交互能力
• 如果需要选中后输入框内也同时展示id和name，直接修改getOptionLabel的返回值即可，示例：getOptionLabel: (option) => ${option.name} (ID: ${option.id})``
• 两个字段的间距、字号、颜色等样式可根据项目设计规范自行调整，也可替换为MUI内置的Typography、Box组件实现样式统一。

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