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