自定义Material UI Autocomplete：悬停列表选项展示div的实现咨询

核心逻辑 #

Material-UI的Autocomplete组件支持通过renderOption属性自定义下拉选项的渲染内容，你只需要在自定义的选项DOM上绑定onMouseEnter、onMouseLeave鼠标事件，配合本地状态控制目标展示div的显隐和内容即可实现需求。

完整可运行代码示例 #

import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';

// 下拉选项数据，可自定义追加悬停时需要展示的内容字段
const options = [
  { label: '选项1', value: 'opt1', extraInfo: '选项1的附加说明内容，支持自定义任意结构' },
  { label: '选项2', value: 'opt2', extraInfo: '选项2的附加说明内容，可以插入图片、列表等元素' },
  { label: '选项3', value: 'opt3', extraInfo: '选项3的附加说明内容，样式可完全自定义' },
];

export default function HoverableAutocomplete() {
  // 状态管理：当前悬停的选项、控制展示div的显隐
  const [activeHoverOption, setActiveHoverOption] = useState(null);
  const [showExtraDiv, setShowExtraDiv] = useState(false);

  return (
    <Box sx={{ display: 'flex', gap: '24px', padding: '20px', width: '100%' }}>
      {/* Autocomplete基础组件 */}
      <Autocomplete
        sx={{ width: 300 }}
        options={options}
        renderInput={(params) => <TextField {...params} label="请选择" variant="outlined" />}
        // 自定义下拉选项渲染
        renderOption={(props, option) => (
          <li
            {...props}
            // 绑定鼠标进入事件，保存当前选项、打开展示div
            onMouseEnter={() => {
              setActiveHoverOption(option);
              setShowExtraDiv(true);
            }}
            // 绑定鼠标离开事件，清空状态、关闭展示div
            onMouseLeave={() => {
              setShowExtraDiv(false);
              setActiveHoverOption(null);
            }}
          >
            {option.label}
          </li>
        )}
      />

      {/* 悬停时展示的指定div */}
      {showExtraDiv && activeHoverOption && (
        <Box
          sx={{
            width: 320,
            padding: '16px',
            border: '1px solid #e0e0e0',
            borderRadius: '6px',
            boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
            alignSelf: 'flex-start',
          }}
        >
          <h4>{activeHoverOption.label} 详细说明</h4>
          <p>{activeHoverOption.extraInfo}</p>
        </Box>
      )}
    </Box>
  );
}

自定义调整说明 #

• 如果需要实现div跟随鼠标位置展示，可以在onMouseEnter事件中获取事件对象的clientX、clientY坐标，将坐标存入状态后给展示div设置position: absolute和对应的定位值即可。
• 原有Autocomplete的选择、搜索等功能不会受自定义事件的影响，renderOption中先展开默认props的写法已经保留了组件原生的所有交互逻辑。
• 如果你使用的是MUI v4及更早版本，仅需要将样式方案替换为makeStyles的写法即可，组件属性和事件逻辑完全兼容。

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