資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 Material UI 的 ComboBox 輸入框中實現自動完成？
由於其能夠在使用者輸入時提供建議選項從而提升使用者體驗，組合框輸入中的自動完成功能已成為廣受歡迎的功能。Material-UI 作為一款知名的 React UI 框架，提供了一種優雅且簡單的解決方案來實現組合框輸入中的自動完成。
在本文中，我們將逐步探討在 Material-UI 中設定和使用自動完成元件的過程，同時保持一定的複雜性和多樣性。
什麼是組合框自動完成？
組合框中的自動完成是指透過建議選項面板來增強普通的文字輸入。此功能在兩種主要情況下非常有用：
當文字框的值必須從預定義的一組允許值中選擇時，例如在位置欄位（組合框）中。
當文字框可以包含任何任意值，但提供可能的選項可以節省使用者時間時，例如在搜尋欄位中。
使用自動完成的步驟
在將自動完成功能新增到組合框之前，請確保已在 React 專案中設定 Material-UI。請按照以下步驟操作：
步驟 1：建立一個新的 React 應用並安裝 MUI
首先，讓我們建立一個 React 應用並安裝 Material UI。請按照以下步驟操作：
開啟您的終端並執行以下命令：
npx create react app chkproject
專案建立後，透過執行以下命令導航到專案目錄：
cd chkproject
執行以下命令安裝 Material UI 及其依賴項：
npm install @mui/material @emotion/react @emotion/styled
步驟 2：將所需的元件匯入 React
現在，建立新的 React 應用後，在 src 資料夾中有一個 main App.js 檔案。開啟它並匯入所需的元件。
import React from "react";
import { Autocomplete, TextField } from '@mui/material';
現在我們已經設定好了 Material-UI，讓我們繼續將自動完成功能新增到我們的組合框輸入中：
步驟 3：新增資料
要向組合框中新增資料項，我們需要首先建立一個物件陣列，作為自動完成的資料來源。預設情況下，元件接受兩種選項結構。
但是，在本文中，我們將使用以下語法。陣列中的每個物件都將具有一個“id”和一個“label”屬性，它們儲存要顯示的值。
語法如下：
const options = [
{ id; 1 label; 'Option 1' }
{ id; 2 label; 'Option 2' }
{ id; 3 label; 'Option 3' }
// Add options as needed
];
步驟 4：定義自定義組合框
組合框是使用者介面中的元素，允許使用者從列表中選擇選項。當整合自動完成功能時，組合框變得更加強大，使使用者能夠有效地找到他們正在尋找的選項。要在您的 React 元件中建立組合框輸入，您可以使用 Autocomplete 元件。
import React from 'react';
const MyComboBox = () => {
return (
<Autocomplete
id="combo box"
options={options}
getOptionLabel={(option) => option.label}
renderInput={(params) => <TextField {...params} label="Select an option" />}
/>
);
};
export default MyComboBox;
在這個例子中，我們將“options”陣列作為 prop 傳遞給 Autocomplete 元件。getOptionLabel prop 用於指定當選擇選項時，應在輸入中顯示 options 陣列的哪個屬性。
步驟 5：處理選擇
Material UI 中的自動完成元件預設處理從資料中選擇專案。我們不需要使用 useState 或 useEffect hook 手動處理選擇。
import React from 'react';
const MyComboBox = () => {
return (
<Autocomplete
id="combo-box"
options={options}
getOptionLabel={(option) => option.label}
renderInput={(params) => <TextField {...params} label="Select an option" />}
/>
);
};
export default MyComboBox;
在此程式碼中，我們使用 useState hook 來管理 selectedOption 狀態，並且每當使用者從組合框中選擇選項時都會呼叫 handleOptionChange 函式。
示例 1
下面的示例演示了在組合框中使用自動完成元件。在這個例子中，我們建立了一個自動完成元件，它呈現一個帶有自定義資料的組合框，當用戶輸入資料時，搜尋到的專案會自動完成。
import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
export default function App() {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h1>How to Autocomplete in combo box in Material UI React</h1>
<Autocomplete
disablePortal
id="combo-box-programming"
options={data}
sx={{ width: 400 }}
renderInput={(params) => (
<TextField {...params} label="Programming Languages" />
)}
/>
</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" },
];
輸出
示例 2
下面的示例演示了 Autocomplete 元件的 autoHighlight 功能的使用。
在這種情況下，我們開發了一個元件，該元件在使用者鍵入時會在組合框中生成建議。這些建議基於自定義資料。當用戶選擇一個選項時，它會自動完成並高亮顯示。高亮顯示功能是透過使用該屬性實現的，該屬性是一個布林值。設定為 true 時，第一個選項將自動高亮顯示。
import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 40,
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
autoHighlight
id="combo-box-programming"
options={data}
sx={{ width: 400 }}
renderInput={(params) => (
<TextField {...params} label="Programming Languages" />
)}
/>
</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 在組合框輸入中啟用自動完成不僅增強了使用者體驗，而且也為使用者介面帶來了優雅感。按照本文提供的步驟，您可以輕鬆地將此功能整合到您的 React 專案中。此外，複雜性和多樣性的運用保證了您的讀者擁有多元化的閱讀體驗。
Material UI 提供的 Autocomplete 元件提供了諸如過濾、分組和高亮顯示等自定義選項。這允許您根據您的需求自定義自動完成行為。採用本文中演示的術語和語言選擇，為您的書面內容注入原創性和專業性。
瀏覽量：216
