資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究ReactJS 搜尋框中的固定選項
有時，開發人員在建立搜尋欄時需要在搜尋框中新增固定選項。例如，您正在開發一個 Web 應用程式，其中包含與汽車、腳踏車、其他車輛等相關的不同網頁。此外，您需要在每個網頁上新增一個搜尋欄。因此，您可能需要在搜尋欄中新增諸如汽車、腳踏車或某些汽車或腳踏車品牌的固定標籤以突出顯示。
在本教程中，我們將學習如何使用 Material UI 庫的 AutoComplete 元件在 ReactJS 中的搜尋框中新增固定選項。
使用者可以在 React 專案中執行以下命令以安裝 Material UI 庫。
npm install @mui/material @mui/styled-engine-sc styled-components
語法
使用者應遵循以下語法以使用 Material UI 的 AutoComplete 元件在搜尋欄中新增固定選項。
<Autocomplete
multiple
onChange={(event, newValue) => {
// set fixed and selected options
}
value={currentValues}
options={searchOptions}
/>
在上述語法中，currentValues 包含所有選定的值和固定值。
示例 1
在下面的示例中，我們使用了 Material UI 的 AutoComplete 元件來實現搜尋欄。我們將汽車品牌儲存在陣列中。此外，我們添加了“BMW”作為固定選項。
之後，我們將“multiple”屬性傳遞給 AutoComplete 元件以允許使用者選擇多個值。我們使用“searchOptions”作為 AutoComplete 元件的選項。此外，每當使用者從搜尋欄中選擇或刪除選項時，我們都會透過新增選定選項和固定選項來更改“currentValues”的值。
在輸出中，使用者可以觀察到“BMW”已預選，並且使用者無法將其刪除，因為它已停用。
import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { Chip } from "@mui/material";
export default function App() {
// Adding different car brands in search options
let searchOptions = [
"BMW",
"Audi",
"Mercedes",
"Toyota",
"Honda",
"Ford",
"Huyndai",
"Kia",
"Nissan",
"Mazda",
"Chevrolet",
"Jeep",
"Fiat",
"Volkswagen",
"Renault",
"Volvo",
"Suzuki",
"Scion",
"Smart",
"Tesla"
];
let fixedOptions = ["BMW"];
let [currentValues, setValue] = useState([...fixedOptions]);
return (
<div>
<h2>
{" "}
Using the <i> Material UI Autocomplete </i> component to implement fixed
option search.{" "}
</h2>
<Autocomplete
multiple
Style={{ width: 400 }}
autoComplete
autoHighlight
freeSolo
onChange={(event, newValue) => {
setValue([
...fixedOptions,
...newValue.filter((option) => fixedOptions.indexOf(option) === -1)
]);
}}
value={currentValues}
options={searchOptions}
renderInput={(data) => (
<TextField {...data} variant="outlined" label="Search Box" />
)}
/>
</div>
);
}
輸出
示例 2
在下面的示例中，我們也使用了 AutoComplete 元件來實現搜尋欄。在這裡，我們從 API 中提取搜尋選項的資料。從 API 中，我們獲取多個產品作為響應，並使用產品的標題作為搜尋選項。此外，我們為搜尋選項固定了兩個產品標題。
在輸出中，使用者可以觀察到搜尋欄中固定了兩個產品標題。
import React, { useState, useEffect } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
export default function App() {
// using the fetch API to get the data from the https://dummyjson.com/products
const [searchOptions, setSearchOptions] = useState([]);
const fetchSearchOptions = async () => {
const response = await fetch("https://dummyjson.com/products");
const data = await response.json();
for (let i = 0; i < data.products.length; i++) {
setSearchOptions((prev) => [...prev, data.products[i].title]);
}
};
useEffect(() => {
fetchSearchOptions();
}, []);
let fixedOptions = ["iPhone 9","OPPOF19"];
// fixedOptions.push(searchOptions[0]);
// fixedOptions.push(searchOptions[1]);
let [currentValues, setValue] = useState([...fixedOptions]);
return (
<div>
<h2>
{" "}
Using the <i> Material UI Autocomplete </i> component to implement fixed
option search. {" "}
</h2>
<Autocomplete
multiple
Style={{ width: 400 }}
autoComplete
autoHighlight
freeSolo
onChange = {(event, newValue) => {
setValue([
...fixedOptions,
...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
]);
}}
value = {currentValues}
options = {searchOptions}
renderInput = {(data) => (
<TextField {...data} variant="outlined" label="Search Box" />
)}
/>
</div>
);
}
輸出
使用者學習瞭如何在 ReactJS 中向搜尋欄新增固定選項。在這裡，我們使用了 AutoComplete 元件來實現搜尋欄。使用者還可以探索 Material UI 官方網站上的 Autocomplete 元件的其他變體。
67 次瀏覽
