React-autosuggest 是一个基于 React 的自动完成输入框组件，可以帮助开发者在网页应用中实现搜索建议、自动补全等功能。本文将介绍如何使用 npm 包 react-autosuggest 搭建自动完成输入框，并提供详细的使用指导和示例代码。
安装 react-autosuggest
首先，在项目根目录下执行以下命令安装 react-autosuggest：
--- ------- -----------------
使用 react-autosuggest
导入组件
在需要使用自动完成输入框的组件文件中导入 react-autosuggest 组件：
------ ----------- ---- --------------------
准备数据
react-autosuggest 需要一个数据源来提供搜索建议。这里我们假设数据源为一个数组，每个元素是一个字符串：
----- ----------- - - -------- --------- --------- --------- ----------- ------ ------------- ----------- --
编写 renderSuggestion 函数
renderSuggestion 函数用来渲染每个搜索建议项。它接受 suggestion 和 query 两个参数，分别表示当前搜索建议项和用户输入的查询字符串。我们可以在这个函数中返回一个 JSX 元素来展示搜索建议项的内容：
-------- ---------------------------- - ----- -- -
----- ------- - ----------------- -------
----- ----- - ----------------- ---------
------ -
------
----------------- ------ -- -
----- --------- - -------------- - ----------- - -----
------ -
----- --------------------- ------------
-----------
-------
--
---
-------
--
-编写 getSuggestions 函数
getSuggestions 函数用来根据用户输入的查询字符串获取搜索建议。它接受一个 value 参数，表示当前输入框中的值。在这个函数中，我们可以使用 JavaScript 的 filter 方法来过滤出符合条件的搜索建议项：
-------- --------------------- -
----- ---------- - ---------------------------
----- ----------- - ------------------
------ ----------- --- -
- --
- -------------------
------------ --
--------------------------------- ------------ --- ----------
--
-编写 onSuggestionsFetchRequested 函数
onSuggestionsFetchRequested 函数是 react-autosuggest 组件的一个回调函数，它会在用户输入时被调用，用来获取新的搜索建议。它接受一个参数，即包含当前输入框中的值的对象：
-------- ----------------------------- ----- -- - -------------------------------------- -
这里我们使用了 React 的 useState 和 useEffect 钩子函数来保存和更新搜索建议：
----- ------------- --------------- - ------------- ------------ -- - ------------------- -- ----
编写 onSuggestionsClearRequested 函数
onSuggestionsClearRequested 函数也是 react-autosuggest 组件的一个回调函数，它会在用户清空输入框时被调用。我们可以在这个函数中将搜索建议数组清空：
-------- ----------------------------- - ------------------- -
渲染组件
最后，在 render 函数中渲染 Autosuggest 组件：
-------- --------------- -
------ -
------------
-------------------------
---------------------------------------------------------
---------------------------------------------------------
-------------------------------- -- -----------
-----------------------------------
-------------
------------ ----- - ----- ------
------
--------- ------- - -------- -- -- -------------------
--
--
--
-其中，inputProps 对象包含了一些用来配置输入框的属性，如 placeholder、value 和 onChange。setValue 是另一个 useState 钩子
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33756