数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Material UI 中对自动完成选项进行分组？
在本文中，我们将探讨如何使用 Material UI（一个流行的用于为 React 应用程序创建用户界面的库）对自动完成选项进行分组。Material UI 的一个关键组件是 Autocomplete 组件，它通过在用户键入时提供建议来促进更快的输入。虽然默认情况下使用自动完成提供了无缝的用户体验，但在某些情况下，对自动完成选项进行分组可以改善建议的呈现和组织。
在了解如何对选项进行分组之前，让我们快速回顾一下 Material UI 的 Autocomplete 组件的基本结构。Autocomplete 组件使用各种选项来建议单词，用户在输入字段中键入时。每个选项通常由一个包含两个属性的对象组成：label（将在建议列表中显示的文本）和 value（选项的实际值）。onChange 事件允许用户在选择选项时访问该选项的值。
在 Material UI 中对选项进行分组
我们可以使用 groupBy 属性在 Material UI 的 Autocomplete 组件中对选项进行分组。此属性接受一个回调函数，该函数确定应如何对选项进行分组。回调函数在接收选项作为参数后应返回该选项所属的组标签。
使用的属性
options - 此属性为 Autocomplete 组件提供了一个要显示的选项数组。每个选项都具有一个 label 属性，指定该选项的文本表示形式。
groupBy - 与此属性关联的函数定义了选项的分组标准。通过处理选择，该函数会为该特定选择生成组标签。因此，选项根据此函数返回的值进行分类。
RenderGroup - 此属性增强了组标题的自定义功能。通过接收一个包含 key、group 和 child 属性的对象，该函数返回一个表示组标题的 React 元素。
语法
<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" />}
/>
示例
在此示例中，我们提供了一个 Autocomplete 组件，允许用户从预定义列表中浏览和选择编程语言。选项根据每种语言的第一个字母进行分组，从而增强了选择的可访问性和视觉一致性。options 数组是通过遍历 data 数组并提取每种语言的第一个字母和标签来形成的。Autocomplete 组件中的 groupBy 属性通过其第一个字母对选项进行分组。
renderInput 属性自定义输入字段的外观，提供一个带有“编程”标签的 TextField。当用户键入时，Autocomplete 会过滤选项并显示匹配的选项，并按其第一个字母整齐排列。直观的输入字段使用户能够轻松选择一种语言，从而在面对一系列可能性时增强了整体用户体验。
import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function App() {
const options = data.map((option) => {
const firstLetter = option.label[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<div
style={{
display: "flex",
marginTop: 40,
flexDirection: 'column',
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.label}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Programming" />}
/>
</div>
);
}
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
输出
自定义分组的自动完成
通过 Material UI 的多功能特性，可以进一步个性化分组的 Autocomplete。通过使用 renderTags 属性，可以修改组标签的视觉表示，甚至可以为数据项的多选添加额外的芯片组件。
语法
<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" />}
renderTags={(params) => (
…
)}
/>
为了更好地控制组的渲染方式，可以使用自定义的 renderGroup 属性。此属性实现为一个函数，它接受一个包含两个字段的对象：
group - 表示组名称的字符串。
children - 属于该组的列表项集合。
示例
import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { Chip } from '@mui/material';
export default function App() {
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
const options = data.map((option) => {
const firstLetter = option.label[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<div
style={{
display: "flex",
marginTop: 40,
flexDirection: 'column',
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
multiple // Allow multiple selections
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.label}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Programming" />}
renderTags={(value, getTagProps) =>
value.map((options, index) => (
<Chip
label={options.label}
{...getTagProps({ index })}
/>
))
}
/>
</div>
);
}
输出
使用添加的“multiple”属性，用户现在可以选择多个选项（表示为芯片），从 Autocomplete 下拉菜单中选择。renderTags 属性用于自定义所选选项的外观，使用 Material-UI Chip 组件将它们呈现为视觉上吸引人的芯片。
此功能丰富的 Autocomplete 下拉菜单使用户能够从大量编程语言中进行多项选择，这些语言以输入字段上方的精美芯片的形式显示。当需要从大量的选择列表中选择多个项目时，这尤其有用，从而显著提升了用户体验。
结论
总而言之，在 Material UI 中将自动完成选项组织成逻辑类别可以显著增强用户体验。这使得查找和选择所需的选项变得更容易，尤其是在面对大量选项时。通过使用 groupBy 属性，您可以根据相关标准有效地对选项进行分组，这将为 React 应用程序带来更具组织性和用户友好的界面。此外，由于 Material UI 的灵活性和自定义选项，您可以修改分组的 Autocomplete 以适应应用程序的特定需求和设计。
1K+ 阅读量
