MUI Autocomplete：如何渲染所有属性并高亮选项中的匹配文本？

要实现同时显示名称（label）和邮箱地址，并且高亮输入匹配的文本，你可以通过修改renderOption函数来完成，具体实现如下：

1. 编写文本高亮辅助函数 #

先实现一个工具函数，用来把文本中与输入内容匹配的部分标记为高亮样式：

const highlightText = (text, inputValue) => {
  if (!inputValue) return text;
  const matchRegex = new RegExp(`(${inputValue})`, 'gi');
  return text.split(matchRegex).map((segment, idx) => 
    matchRegex.test(segment) ? <span key={idx} style={{ backgroundColor: '#ffeb3b' }}>{segment}</span> : segment
  );
};

2. 修改renderOption渲染多属性并应用高亮 #

更新renderOption逻辑，同时渲染名称和邮箱地址，对两个字段分别应用高亮效果：

<Autocomplete
    freeSolo
    disabled={false}
    fullWidth={false}
    label={'联系人'}
    multiple={true}
    componentsProps={{
        paper: {
           sx: {
              border: '1px solid lightgray',
              marginLeft: 10.5,
              width: 484,
           }
        }
    }}
    options={[
      { email: 'apple@gmail.com', label: 'apple', value: 'apple' },
      { email: 'pear@gmail.com', label: 'pear', value: 'pear' },
      { email: 'orange@gmail.com', label: 'orange', value: 'orange' },
      { email: 'grape@gmail.com', label: 'grape', value: 'grape' },
      { email: 'banana@gmail.com', label: 'banana', value: 'banana' }
    ]}
    renderOption={React.useCallback((props, option, { inputValue }) => {
      return (
          <Box component='li' {...props} sx={{ padding: '8px 12px' }}>
              <div style={{ fontWeight: 500 }}>{highlightText(option.label, inputValue)}</div>
              <div style={{ fontSize: '0.875rem', color: '#666' }}>{highlightText(option.email, inputValue)}</div>
          </Box>
      )
  }, [])}
/>

实现说明 #

• 高亮函数通过正则匹配输入内容，将匹配片段用黄色背景标记，同时保留原文本的大小写
• 选项内用两个div分别展示名称和邮箱，通过字体权重、大小和颜色区分层级，提升可读性
• 给选项容器添加内边距，优化整体视觉体验
• 如果highlightText定义在组件内部，需要将其加入useCallback的依赖数组中

修改完成后，Autocomplete的选项列表会同时展示名称和邮箱地址，输入的内容会在两个字段的对应匹配部分自动高亮。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A