React-Bootstrap-Typeahead 是一个 React 组件，用于渲染 Bootstrap 风格的 Typeahead（自动补全）下拉菜单。它是一款非常实用的工具，可以帮助开发者快速搭建响应式的输入框组件，并且支持各种高级的搜索、筛选和自定义渲染功能。
安装和使用
首先，需要安装 React-Bootstrap-Typeahead 和它的依赖包 React 和 Bootstrap。可以使用 npm 或者 yarn 来安装这些包：
# 使用 npm 安装 npm install react-bootstrap-typeahead react react-dom bootstrap # 使用 yarn 安装 yarn add react-bootstrap-typeahead react react-dom bootstrap
安装完成后，在你的代码中引入 Typeahead 组件即可开始使用。以下示例展示了如何在 React 中使用 Typeahead 组件进行简单的搜索：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ----------------------------
------ ---------------------------------------
------ ----------------------------------------------
----- ------- - -
--------
---------
---------
-------
-------------
------
--------
--
-------- ----- -
----- ---------------- ------------------ - -------------
------ -
----------
---------------------------
---------------
----------------------------
--------------------------- -- -- ---- ----
------------------- - ---------
-------------------------
--
--
-
------ ------- ----在这个示例中，我们定义了一个包含多个水果名称的数组 options，并将其转换为组件可以接受的格式。然后，我们使用 useState 钩子来保存用户选择的选项，并且传递给 Typeahead 组件作为 selected 属性。最后，我们将 Typeahead 组件渲染到页面上，并通过一些属性和事件来定制它的行为和外观。
进阶功能
除了基本的搜索和选项选择外，React-Bootstrap-Typeahead 还支持许多高级功能，例如异步加载、自定义筛选器、多选模式、标签显示等等。下面是一些常用的进阶功能示例：
异步加载
如果需要从远程服务器获取选项列表，可以使用 asynsOptions 属性。该属性接受一个返回 Promise 的函数，用于在用户输入时动态获取匹配的选项。以下示例展示了如何使用 asynsOptions 来获取 GitHub 用户名：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ----------------------------
-------- ----- -
----- -------------- ---------------- - -------------
----- ----------- ------------- - ----------------
----- --------- ----------- - -------------
----- ------------ - ------- -- -
-------------------
-------------------------------------------------------
------------ -- ------------
-------- ----- -- -- ------------------
----------- -- ---------------------
--
------ -
----------
---------------------------
---------------------
------------------ -- ---------------- ------------------
-----------------------
-----------------
------------------- ------ ---------
-----------------------
--
--
-
------ ------- ----在这个示例中，我们使用 useState 钩子来保存用户选择的选项、状态指示器和搜索结果。然后，我们定义一个函数 handleSearch，用于从 GitHub API 中获取与搜索值匹配的用户列表，并更新状态。最后，我们将 handleSearch 函数传递给 onSearch 属性，并启用 isLoading 属性以显示加载指示器。
自定义筛
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37279