【Material-UI 组件】Autocomplete 中的 Grouped 功能详解

news2025/7/6 13:37:21

文章目录

- 一、组件概述
- - 1.1 Grouped 功能介绍
  - 1.2 适用场景
- 二、基础用法
- - 2.1 实现 Grouped 功能
  - - 代码拆解
- 三、高级配置
- - 3.1 自定义组渲染
  - 3.2 常见配置
- 四、最佳实践
- - 4.1 数据排序
  - 4.2 组标题优化
  - 4.3 性能优化
  - 4.4 可访问性
- 五、总结

Grouped 功能使得 Autocomplete 组件能够按特定维度对选项进行分组，并显示组标题。本文将深入探讨如何使用 Material-UI 的 Autocomplete 组件中的 Grouped 功能，包括实现方式、自定义渲染、最佳实践等。

一、组件概述

1.1 Grouped 功能介绍

Material-UI 的 Autocomplete 组件提供了 groupBy 属性，允许开发者根据特定的维度对选项进行分组。使用该功能，可以为用户提供更有组织的选择界面，尤其在选项较多时，能显著提升用户体验。

1.2 适用场景

Grouped 功能广泛适用于需要对数据进行分类显示的场景，如：

商品分类： 根据商品类型分组，便于用户选择。
联系人列表： 按照字母顺序或组织结构分组。
地理区域： 按国家、州、省等分组。

二、基础用法

2.1 实现 Grouped 功能

要实现选项分组，需要配置 groupBy 属性，同时确保选项按照同一维度排序。以下是一个简单的示例：

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

const options = [
  { title: 'The Godfather', firstLetter: 'G' },
  { title: 'Pulp Fiction', firstLetter: 'P' },
  { title: 'The Dark Knight', firstLetter: 'D' },
  // 更多电影...
];

function GroupedExample() {
  return (
    <Autocomplete
      id="grouped-demo"
      options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
      groupBy={(option) => option.firstLetter}
      getOptionLabel={(option) => option.title}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="With categories" />}
    />
  );
}

export default GroupedExample;

在这个例子中，groupBy 属性指定了分组的维度为 firstLetter，即根据选项的首字母分组。同时，通过 options.sort 方法确保选项按同一维度排序，避免重复组标题。

options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))} 用于对 Autocomplete 组件中的选项进行排序，以确保它们按照特定的顺序显示。具体来说，它是对选项进行按 firstLetter 字段的降序排序。

代码拆解

options.sort(...):
- options 是一个包含多个选项对象的数组，每个对象代表一个选项。
- .sort(...) 是数组的排序方法，用于对数组中的元素进行排序。排序时，会调用一个比较函数。
比较函数 (a, b) => -b.firstLetter.localeCompare(a.firstLetter):
- 这是传递给 sort 方法的比较函数，决定了排序的顺序。
- a 和 b 是数组中的两个元素，分别表示两个选项对象。
b.firstLetter.localeCompare(a.firstLetter):
- ```
localeCompare
```
  是字符串的一个方法，用于比较两个字符串，并返回一个数值：
  - 如果字符串 b.firstLetter 位于字符串 a.firstLetter 之前（按照字母顺序），则返回一个负数。
  - 如果两个字符串相等，则返回 0。
  - 如果字符串 b.firstLetter 位于字符串 a.firstLetter 之后，则返回一个正数。
- firstLetter 是选项对象的一个属性，通常表示该选项的首字母。
-b.firstLetter.localeCompare(a.firstLetter):
- 在 localeCompare 结果前面加上负号 -，是为了反转比较结果的顺序。
- 例如，如果 localeCompare 返回 -1（即 b.firstLetter 在 a.firstLetter 之前），加上负号后变为 1。这意味着 b 应该在 a 之后，从而实现降序排序。

三、高级配置

3.1 自定义组渲染

除了基本的分组功能外，Material-UI 还允许自定义组的渲染。通过 renderGroup 属性，开发者可以自定义每个组的样式和内容。

<Autocomplete
  id="grouped-demo"
  options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
  groupBy={(option) => option.firstLetter}
  getOptionLabel={(option) => option.title}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="With categories" />}
  renderGroup={(params) => (
    <li key={params.key}>
      <div style={{ backgroundColor: '#f0f0f0', padding: '5px 10px' }}>
        <strong>{params.group}</strong>
      </div>
      <ul style={{ listStyleType: 'none', padding: 0 }}>
        {params.children}
      </ul>
    </li>
  )}
/>