ReactJS 中的自动完成和建议

react jsjavascript libraryfront end technology更新于 2025/11/17 8:44:17

在本文中，我们将学习如何在 React JS 中创建自动完成和建议框。自动完成是每个网站都具备的基本功能之一，然而在 React 网站中实现它却非常复杂且困难重重。这里，我们将看到一个在 React JS 中实现自动完成功能的简单方法。

首先创建一个 React 项目 −

npx create-react-app tutorialpurpose

现在进入项目目录 −

cd tutorialpurpose

示例

首先下载一个包 −

npm install --save downshift

此库用于为搜索框添加建议列表，列表将写入数组中。

只需复制以下代码并更改其样式和数组数据即可。如果您的数组结构包含任何其他键(此处，我将"value"作为键)，则只需更改 <ul> 标签下的键名称即可。

在 App.js 中添加以下代码行 −

import * as React from "react";
import Downshift from "downshift";
const items = [
   { value: "apple" },
   { value: "pear" },
   { value: "orange" },
   { value: "grape" },
   { value: "banana" },
];

export default function App() {
   return (
      <Downshift
         onChange={(selection) =>
           alert(
             selection ? `You selected ${selection.value}` : "Selection Cleared"
            )
         }
         itemToString={(item) => (item ? item.value : "")}>
      {({
         getInputProps,
         getItemProps,
         getLabelProps,
         getMenuProps,
         isOpen,
         inputValue,
         highlightedIndex,
         selectedItem,
         getRootProps,
   }) => (
      <div>
      <label {...getLabelProps()}>Enter a fruit</label>
      <div
         style={{ display: "inline-block" }}
         {...getRootProps({}, { suppressRefError: true })}
         >
         <input {...getInputProps()} />
         </div>
         <ul {...getMenuProps()}>
            {isOpen
               ? items
                  .filter(
                   (item) => !inputValue || item.value.includes(inputValue)).map((item,  index)=> (
               <li
               {...getItemProps({
               key: item.value,
               index,
               item,
               style: {
               backgroundColor:
               highlightedIndex === index ? "lightgray" : "white",fontWeight: selectedItem === item ?"bold" : "normal",},})}>{item.value}</li>)): null}
               </ul>
             </div>
         )}
      </Downshift>
   );
}

解释

首先，我们创建了一个水果数组。在return中，我们创建了一个 Downshift 组件，并在其中定义了选择任何选项时都会弹出一个警报。我们在 itemToString 属性中将所有项目更改为字符串。
然后，我们通过 downshift 的默认设置，在 <Downshift> 和 </Downshift> 之间进行了映射。
在映射中，我们定义了默认的 LabelProps、默认的 rootDiv prop，并在 <ul> 中定义了默认的 menu props。菜单 props 是我们要从中建议的列表。
在 <ul> 中，我们只是根据搜索输入框中的输入进行过滤，然后通过它进行映射。
在 <li> 中，我们添加了一些默认 props，供建议、自动完成和样式参考。您可以调整样式，但在明确操作之前，请勿调整其他内容。