前端开发中，输入框自动补全是经常使用的功能之一，而依靠 React 来实现该功能，我们可以使用 react-typeahead 这个 npm 包。本文将介绍如何使用该包来实现输入框的自动补全功能。
安装 react-typeahead
我们首先需要在项目中安装 react-typeahead 包。使用以下命令：
--- ------- --------------- ------
使用 react-typeahead
要使用 react-typeahead，我们需要在项目中引入它：
------ ------ - --------- - ---- -------- ------ --------- ---- ------------------
然后，我们需要传入一个数据集来渲染 Typeahead 组件。数据集可以是一个简单的数组，也可以是一个包含对象的数组。其中，每个对象都应该有一个名为 value 的属性。
----- ------- - - ------- --- ------- --- ------- --- --
或者
----- ------- - - - ------ ------- --- --- - -- - ------ ------- --- --- - -- - ------ ------- --- --- - -- --
渲染 Typeahead 组件的方式有两种。第一种是使用 JSX：
---------- ----------------- --
此时，我们得到一个简单的输入框。当用户输入时，Typeahead 会根据用户输入来过滤 options 中的数据，并将它们显示在下拉菜单中。当用户选择一个选项时，该选项的值将被插入到输入框中。
第二种方式是使用 React.createElement：
------------------------------ - -------- ------- ---
同样，当用户输入时，Typeahead 会根据用户输入来过滤 options 中的数据，并将它们显示在下拉菜单中。当用户选择一个选项时，该选项的值将被插入到输入框中。
我们还可以传入其他选项来自定义 Typeahead 的行为。以下是一些常见的选项：
placeholder：在输入框中显示的占位符。minLength：用户需输入的最小长度，才会过滤选项并显示下拉菜单。maxVisible：显示在下拉菜单中的最大选项数目。customClasses：自定义样式类。onOptionSelected：当用户选择一个选项时，将被调用的回调函数。这个函数接收两个参数，一个是选中的选项对象，一个是选项的索引。
示例代码
------ ------ - --------- - ---- --------
------ --------- ---- ------------------
----- --- ------- --------- -
------------------ -
-------------
------------ - -
- ------ ------------- --- - --
- ------ ------- --- - --
- ------ ------ --- - --
- ------ -------- --- - --
- ------ ---------- --- - --
- ------ ------ --- - --
--
-
---------------------- ------ -
------------------- ----------- --------
-
-------- -
------ -
----------
----------------------
----------------- - --- -----------
------------
--------------
----------------
------ -----------------
-------- -------------------
--------- ---------------------
------ -----------------
------- ------------------
--
-------------------------------------------------
--
--
-
-总结
使用 react-typeahead 可以很容易地实现输入框自动补全的功能，让用户更加高效地输入。在使用 react-typeahead 时，我们只需要传递数据集和一些选项，就能够完成该功能。同时，我们也可以定制化样式类和回调函数，来满足更加个性化的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb5d6b5cbfe1ea061147e