資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中自定義自動完成元件？
在本文中，我們將學習如何在 Material UI 中自定義自動完成元件。
流行的 React UI 框架 Material UI 提供了各種具有現代和優雅設計的元件。自動完成元件就是這樣一種靈活的元件，它可以在使用者在輸入欄位中輸入時即時提供建議。
藉助 Material UI 文件中提供的某些 props，也可以輕鬆自定義自動完成元件。諸如 renderTags 和 renderInput 之類的 props 可以幫助自定義輸入自動完成元件。
自動完成元件不僅可以改善使用者體驗，還可以實現無縫自定義，使開發人員能夠修改其外觀、行為和樣式，以滿足其應用程式的特定需求。
自動完成自定義 Props
在自定義自動完成元件時，可以使用不同的 props。讓我們詳細瞭解所有這些 props -
renderInput - 此 prop 用於渲染輸入。在使用自動完成元件時，這是必需的 prop。
renderTags - 此 prop 用於渲染標籤。它僅渲染提供給元件的選定值。
renderOption - 此 prop 渲染選項，並且預設情況下它使用 getOptionLabel。
getOptionLabel - 此 prop 確定給定選項的字串值。它用於填充輸入（如果未提供 renderOption，則填充列表框選項）。
如果在自由單選模式下使用，它必須同時接受選項的型別和字串。
filterOptions - 此 prop 是一個函式，用於查詢要在搜尋時渲染的過濾後的選項。
以上 props 是一些常用的 props，但並不限於此。自動完成元件中還有其他一些 props。
語法
以下是自定義自動完成元件的常用語法 -
<Autocomplete
multiple
renderTags={(value, getTagProps) =>
value.map((item, index) => (
<Chip
key={index}
label={item.label}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={(item) => item.label}
sx={{
display: "inline-block",
}}
options={data}
renderInput={(params) => (
<div {...params}>
<input {...params} />
</div>
)}
/>
示例
以下示例演示了在 Material UI 中具有多個值選擇的自定義自動完成元件。
import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import { Chip } from "@mui/material/";
import TextField from "@mui/material/TextField";
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" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3>Select language</h3>
<Autocomplete
multiple
renderTags={(value, getTagProps) =>
value.map((item, index) => (
<Chip
key={index}
label={item.label}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={(item) => item.label}
sx={{
display: "inline-block",
}}
options={data}
renderInput={(params) => (
<TextField
sx={{
width: 300,
bgcolor: "lightgreen",
fontSize: 20,
color: "black",
borderColor: "green",
}}
{...params}
/>
)}
/>
</div>
);
}
輸出
示例
以下示例演示了在 Material UI 中的自定義自動完成輸入元件。
在此示例中，我們使用自定義樣式（如背景顏色、文字顏色、字型大小等）自定義了自動完成元件，此外，我們還使用相應的引數自定義了輸入 div。
import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
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" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3>Select language</h3>
<Autocomplete
sx={{
"& input": {
width: 300,
padding: 2,
bgcolor: "lightgreen",
fontSize: 20,
color: "black",
borderRadius: 10,
}
}}
options={data}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input {...params.inputProps} />
</div>
)}
/>
</div>
);
}
輸出
示例
以下示例演示了在 Material UI 中的自定義自動完成輸入元件中的提示。在此示例中，我們還添加了提示功能，當用戶輸入任何內容時，它會顯示匹配的結果。我們使用了 renderInput 和 filterOptions 來實現此功能。
import * as React from "react";
import { TextField } from "@mui/material/";
import { Autocomplete } from "@mui/material/";
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" },
];
// main App component rendering the custom autocomplete component
export default function App() {
var getHint = React.useRef("");
const [val, setVal] = React.useState("");
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
onKeyDown={(event) => {
if (event.key === "Tab") {
if (getHint.current) {
setVal(getHint.current);
event.preventDefault();
}
}
}}
onBlur={() => {
getHint.current = "";
}}
disablePortal
inputValue={val}
filterOptions={(options, state) => {
const showItems = options.filter((item) =>
item.label
.toLowerCase()
.trim()
.includes(state.inputValue.toLowerCase().trim())
);
return showItems;
}}
options={data}
renderInput={(params) => {
return (
<div sx={{ position: "relative" }}>
<div>{getHint.current}</div>
<TextField
{...params}
onChange={(event) => {
const selNewVal = event.target.value;
setVal(selNewVal);
const matchItem = data.find((option) =>
option.label.startsWith(selNewVal)
);
if (selNewVal && matchItem) {
getHint.current = matchItem.label;
} else {
getHint.current = "";
}
}}
label="Select language"
/>
</div>
);
}}
sx={{ width: 400 }}
/>
</div>
);
}
輸出
結論
我們瞭解了幾種自定義 Material UI 自動完成元件的不同方法。透過更改大小、樣式、建議和所選值的處理方式，可以無縫地調整自動完成元件以適應應用程式的設計和功能。Material UI 的適應性和廣泛的自定義選項使其成為設計愉悅使用者體驗的強大工具。
透過試驗各種自定義選項並釋放您的創造力，為我們的 Material UI 驅動的應用程式建立直觀且美觀的自動完成元件。
更新於: 2023-10-30
540 次檢視
廣告