简介
reactstrap-typeahead 是一个利用 Reactstrap 库实现的轻量级搜索类型-ahead组件。它提供了一个可定制的自动完成功能，针对常见搜索用例包括异步请求、自定义显示和无数据显示，以及自定义搜索匹配逻辑。
该库的官方地址为: https://www.npmjs.com/package/reactstrap-typeahead
安装
通过 npm 或 yarn 安装：
--- ------- ------ -------------------- - ---- --- --------------------
基本使用
使用 reactstrap-typeahead，需要将其导入：
------ --------- ---- ----------------------
然后可以在 JS 文件中进行初始化：
---------- ----------------- ------------ ------------------- ----------- ------- -------- ------- --
其中 options 属性是必需的，它定义了我们的选项。placeholder 属性可选，可以设置文本框的提示信息。
设定默认值和选择项
要将输入框的默认值和选定的选项预填充在输入框中，使用 defaultInputValue 属性和 defaultSelected 属性，如下所示：
---------- ----------------- ------------ ------------------- ----------- ------- -------- ------- -------------------------- -------------------------- --
处理提交
通常在用户选择选项之后，我们需要将该选项发送到服务器或通过其他方式进行处理。例如，在组件中使用 onChange 处理程序：
----------
----------------- ------------
-------------------- -- -
---------------------
--
------------------- ----------- ------- -------- -------
--自定义选项模板
该插件支持自定义选项模板，可以使用自定义函数来创建选项。这里举一个例子，当用户成功搜索替代文本时，在标签中显示关键字。
----------
----------------- ------------
------------------- ----------- ------- -------- -------
------------------ -- -
----- ----- - --- -------------------- -----
------ -
-----
---------------------- -----------------------
------
-
--
--在上述示例中，我们通过使用正则表达式以加粗显示选项中的关键字。
自定义搜索逻辑
要自定义搜索逻辑，可以从 filterBy 属性中传递自定义函数。为了举例，让我们通过选项列表上的键开始搜索：
----------
----------------- ------------
------------------- ----------- ------- -------- -------
------------------ ------ -- -
------ ------------------------------------------------------ --- -- -- -------------------------- --- --
--
--在上述示例中，我们定义了一个自定义函数，它使用 toLowerCase()方法将输入值和选项列表上的键都转换成小写，并使用 indexOf()方法来确定输入值是否匹配。
完整代码示例
------ ------ - -------- - ---- -------
------ --------- ---- ----------------------
------ - ---------- ---- --- - ---- ------------
----- --- - -- -- -
----- ---------- ------------ - ------------
------ -
-----------
-----
---- ---------- ----
----------
----------------- ------------
----------
---------
-----------
-------
--------
-----
--
--------------------------
--------------------------
------------------ -- -
----- ----- - --- -------------------- -----
------ -
-----
---------------------- -----------------------
------
-
--
------------------ ------ -- -
------ ------------------------------------------------------ --- -- -- -------------------------- --- --
--
-------------------- -- -
---------------------
--
--
------
---- ---------- ----
------------ -----------
-------------------- -- -- -
---- --------------------
---
------
------
------------
-
-
------ ------- ---在上述示例中，我们使用了 React 的 useState 钩子来处理选定的项目并在页面上的第二列中显示它们。
总结
在本文中，我们了解了 reactstrap-typeahead 库的使用，并讲解了包括基本用法、处理提交等内容。我们还介绍了一些高级功能，例如自定义选项模板和搜索逻辑。希望以上教程能够帮助到你。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056b2581e8991b448e53b7