ReactJs 如何创建一个动态搜索框

搜索是网站最重要的功能之一。它允许用户在网站上过滤产品和搜索特定的东西，减少用户在网站上寻找特定东西的时间。

例如，你可以在这个页面的顶部看到一个搜索栏。每当我们输入任何搜索输入，它就会根据搜索结果过滤课程和教程，向我们显示搜索结果。

本教程将教我们如何在ReactJS中从头开始实现动态搜索。

使用Material UI的AutoComplete组件

Material UI库包含各种内置组件，我们可以在React应用中直接使用。它还包含 “AutoComplete “组件，我们可以在React应用中使用它作为搜索。它将各种值作为道具，并根据我们传递的道具进行操作。

语法

用户可以按照下面的语法来使用MaterialUI的AutoComplete组件来实现动态搜索。

<Autocomplete
   autoComplete
   options={myOptions}
   renderInput={(data) => (
      <TextField {...data} variant="outlined" label="Search Box" />
   )}
/>

在上面的语法中，我们传递了要渲染的Textfield和myOptions作为所有搜索选项。

例子

在下面的例子中，我们使用useEffect()钩子从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从头开始创建动态搜索

我们可以在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>
   );
}