資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
