資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中建立動態搜尋框？
搜尋是網站最重要的功能之一。它允許使用者過濾產品並在網站上搜索特定內容，從而減少使用者在網站上查詢特定內容所需的時間。
例如，您可以在此頁面頂部看到一個搜尋欄。每當我們輸入任何搜尋內容時，它都會透過根據搜尋結果過濾課程和教程來顯示搜尋結果。
本教程將教會我們如何在 ReactJS 中從頭開始實現動態搜尋。
使用 Material UI 的 AutoComplete 元件
Material UI 庫包含各種內建元件，我們可以在 React 應用中直接使用。它還包含“AutoComplete”元件，我們可以將其用作 React 應用中的搜尋功能。它接收各種值作為 props，並根據我們傳遞的 props 進行相應的行為。
語法
使用者可以按照以下語法使用 MaterialUI 的 AutoComplete 元件來實現動態搜尋。
<Autocomplete
autoComplete
options={myOptions}
renderInput={(data) => (
<TextField {...data} variant="outlined" label="Search Box" />
)}
/>
在以上語法中，我們傳遞了 Textfield 進行渲染，並使用 myOptions 作為所有搜尋選項。
示例
在下面的示例中，我們使用了 useEffect() hook 從 API 獲取所有資料。之後，使用 API 資料，我們建立了包含標籤的物件。myOptions 陣列中所有物件的標籤都應該是唯一的，我們可以在搜尋元件中搜索這些標籤。
import React, { useEffect, useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
export default function App() {
const [myOptions, setMyOptions] = useState([]);
function getData() {
// fetch data
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => {
return response.json();
})
.then((res) => {
for (var i = 0; i < res.length; i++) {
if (!myOptions.some((obj) => obj.label == res[i].name)) {
// create an object with a label
let object = {
label: res[i].name,
usersName: res[i].username,
};
myOptions.push(object);
}
}
setMyOptions(myOptions);
});
}
useEffect(() => getData(), [myOptions]);
return (
<div>
<h2>
{" "}
Using the <i> Material UI Autocomplete </i> component to implement search. </h2>
<Autocomplete
Style = {{ width: 400 }}
autoComplete
autoHighlight
freeSolo
options = {myOptions}
renderInput = {(data) => (
<TextField {...data} variant = "outlined" label = "Search Box"/>
)}
/>
</div>
);
}
輸出
使用 ReactJS 從頭開始建立動態搜尋
我們可以在 ReactJS 中建立一個包含所有值或物件陣列。之後，當用戶搜尋任何值時，我們可以使用 filter() 方法從匹配搜尋輸入值的陣列中過濾所有物件。我們可以使用 match() 方法檢查輸入是否與當前物件屬性匹配。
語法
使用者可以按照以下語法根據搜尋輸入值過濾陣列中的物件。
let filteredCountries = countries.filter((country) => {
return country.name.match(searchInput.toLowerCase());
});
const filtered = filteredCountries?.map((country) => (
// return mapped values
));
在以上語法中，我們使用了 filter() 和 match() 方法根據搜尋值過濾所有物件，然後使用 map() 方法將物件值對映到陣列中。
示例
在下面的示例中，我們建立了一個包含國家/地區物件的陣列，這些物件具有名稱和人口屬性。之後，每當使用者更改輸入時，我們都會呼叫 handleChange() 函式，該函式會根據搜尋值過濾物件。
接下來，我們使用 map() 方法將過濾後的值對映到表格列。在元件中，我們呼叫了 searchList() 函式，該函式返回所有過濾後的國家/地區。
import React, { useState } from "react";
export default function App() {
const [searchInput, setSearchInput] = useState("");
let countries = [
{ name: "china", population: 1439323776 },
{ name: "india", population: 1380004385 },
{ name: "usa", population: 331002651 },
{ name: "indonesia", population: 273523615 },
{ name: "pakistan", population: 220892340 },
{ name: "canada", population: 37742154 },
{ name: "new zealand", population: 4822233 },
{ name: "italy", population: 60461826 },
{ name: "south africa", population: 59308690 },
{ name: "rusia", population: 154934462 },
{ name: "egypt", population: 102334404 },
{ name: "iran", population: 83992949 },
{ name: "france", population: 65273511 },
{ name: "mexico", population: 128932753 },
{ name: "spain", population: 46754778 },
{ name: "senegal", population: 16743927 },
{ name: "brazil", population: 212559417 },
{ name: "denmark", population: 5792202 },
{ name: "sudan", population: 43849260 },
{ name: "iraq", population: 40222493 },
{ name: "peru", population: 32971854 },
{ name: "bangladesh", population: 164689383 },
{ name: "portugal", population: 10196709 },
];
const handleChange = (e) => {
e.preventDefault();
setSearchInput(e.target.value);
};
function searchList() {
// filter countries according to search values
let filteredCountries = countries.filter((country) => {
return country.name.match(searchInput.toLowerCase());
});
// create table rows
const filtered = filteredCountries?.map((country) => (
<tr>
<td> {country.name}</td>
<td> {country.population} </td>
</tr>
));
return <div> {filtered} </div>;
}
return (
<div>
<h2>
{" "}
Creating the <i> dynamic search </i> component to implement search.
</h2>
<input
Type="search"
placeholder="Search here"
onChange={handleChange}
value={searchInput}
/>
<table style={{ tableLayout: "fixed", width: "11rem" }}>
<tr>
<th> Country </th>
<th> population </th>
</tr>
{searchList()}
</table>
</div>
);
}
輸出
使用者學習瞭如何使用 Material UI 和純 JavaScript 建立動態搜尋元件。Material UI AutoComplete 元件包含各種 props 用於操作元件，因此使用者可以使用它。對於 Material UI 未提供的更多自定義需求，使用者可以使用第二種方法建立自己的搜尋功能。
3K+ 閱讀量
