react-autowhatever 是一个基于 React 实现的自动完成组件库，它可以帮助我们实现各种自动完成的功能——比如呈现匹配列表、高亮匹配词汇、复杂的键盘导航和交互等等。
在本篇文章中，我们将介绍如何使用 react-autowhatever 来实现一个简单的自动完成组件，并逐步介绍它提供的各种功能和选项。
安装
首先，我们需要利用 npm 来安装 react-autowhatever。在终端中打开你的项目目录，输入下面的命令：
npm install react-autowhatever --save
这将会把 react-autowhatever 加入到你的项目中，并把它添加到你的 package.json 文件的依赖中。接下来，我们就可以开始在代码中使用它了。
基本使用
让我们来看一个最简单的例子，实现一个输入框，当用户输入时，页面上展示这个输入框内的文本。首先，我们需要引入 react-autowhatever 模块。在你的 JS 文件中加入一行类似下面的代码：
import Autowhatever from 'react-autowhatever';
然后，我们需要实现一个 renderInput 函数，该函数将在我们的组件中呈现一个输入框。代码如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ---------------- ------- --------------- - ------------------ - ----- - ------ -------- - - ------ ------ - ------ ----------- ------------- ----------- -- ------------------------- -- -- - -------- - ------ - ------------- --------------------------------------- ------------- ------ --- --------- -- -- -- -- ------------------------- -- -- - -展开代码
我们首先在 renderInput 函数中定义了一个简单的文本输入框。该函数会被传入 Autowhatever 实例中作为一个名为 renderInputComponent 的选项。
在 render 方法中，我们创建一个 Autowhatever 实例，并将 renderInputComponent 设置为 renderInput。当我们的组件被渲染时，Autowhatever 就会自动使用 renderInput 来呈现输入框。
现在，运行你的应用，你会看到你的页面上有了一个输入框。
对接数据源
遗憾的是，上面的例子中我们并没有与任何数据源对接。接下来，我们将展示如何通过 Autowhatever 简单地对接一个静态数据源。
首先，我们需要定义一个数组，其中包含了我们的搜索建议列表：
-- -------------------- ---- ------- ----- ----------- - - - ----- -------- ------ ----------- -- - ----- --------- ------ ------- -- - ----- --------- ------ ----------- -- - ----- ------- ------ ----------- -- - ----- ------------- ------ ----------- -- - ----- ------ ------ ---------- -- - ----- ------------- ------ ----------- -- - ----- ----------- ------ ------- -- - ----- ---------- ------ ----------- -- - ----- ------------ ------ ----------- -- - ----- ------- ------ ---------- -- - ----- -------- ------ ----------- -- - ----- -------- ------ ------- -- - ----- ------------ ------ ----------- -- - ----- --------- ------ ----------- -- - ----- ------- ------ ----------- -- - ----- --------- ------ ----------- -- - ----- ------------ ------ ----------- -- - ----- ------------- ------ ----------- -- - ----- ------------ ------ ----------- -- - ----- ----- ------- ------ ----------- -- - ----- -------- ------ ------ ----------- -- - ----- ------------- ------ ------- -- - ----- ------- ------ ----------- -- - ----- ----------- ------ ------- - --展开代码
接下来，我们定义一个函数，该函数将在用户输入时调用，以获取该文本框的搜索结果：
-- -------------------- ---- ------- -------- --------------------- - ----- ---------- - --------------------------- ----- ----------- - ------------------ ------ ----------- --- - -- ------------ - - -- --------------------- -- -------------------------------- ------------ --- ------------ - ----------------------- -- --------------------------------------------- - --- -展开代码
这个函数接受一个字符串参数，并且针对该值与数组中的每个项目进行比较以获取搜索结果。我们将这个函数传递给 Autowhatever 的 suggestions 选项中，如下所示：
-- -------------------- ---- ------- -------- --------------------- - ----- ---------- - --------------------------- ----- ----------- - ------------------ ------ ----------- --- - -- ------------ - - -- --------------------- -- -------------------------------- ------------ --- ------------ - ----------------------- -- --------------------------------------------- - --- - ----- ---------------- ------- --------------- - ------------------ - ----- - ------ -------- - - ------ ------ - ------ ----------- ------------- ----------- -- ------------------------- -- -- - -------- - ------ - ------------- --------------------------------------- ---------------------------- ------------- ------ --- --------- -- -- -- -- ------------------------- -- -- - -展开代码
现在运行你的应用即可看到，当用户输入时匹配的搜索结果会自动显示在下方的列表中。
高亮词汇
让我们来添加一个高亮词汇的功能，这样我们的搜索结果中匹配的字符会自动高亮显示。
首先，我们需要通过安装 react-highlight-words 模块来实现高亮。在终端中运行以下命令：
npm install --save react-highlight-words
接下来，我们需要在 renderSuggestion 函数中进行高亮的定制。在这个函数中，我们将遍历我们的搜索结果，标记其中匹配的字符并返回一个新数组。
-- -------------------- ---- ------- ------ ----------- ---- ------------------------ ----- ---------------- ------- --------------- - -- --- ---------------------------- ------ - ----- -- - ----- -------------- - ---------------- ----- ------- - --------------------- ------- ----- ----- - --------------------- --------- ------ - ----- ------------ ------------ ------------------------------ --------------------- ----------------- ------------------------------- -- ----------- -- ------- -- - -------- - ------ - ------------- --------------------------------------- ---------------------------- ------------------------ -- --- ---------------------------------------- ------------- ------ --- --------- -- -- -- -- ------------------------- -- -- - -展开代码
在 Highlighter 组件的属性中，我们需要把匹配的部分替换成一个 span 元素，并且给它加上一个 CSS 类名 highlight。
现在再次运行你的应用，你会发现匹配的部分会自动高亮显示。
自定义选项列表
到目前为止，我们已经妥善处理了搜索和高亮处理，并成功展示了选项列表。现在我们来介绍如何自定义选项列表。
首先，我们需要定义一个 renderSuggestionsContainer 函数，该函数将返回我们自定义的组件（比如一个 div 元素），而不是默认呈现的列表。在这个函数中，我们可以根据需要添加各种样式和逻辑。
-- -------------------- ---- ------- ----- ---------------- ------- --------------- - -- --- ---------------------------- --------------- -------- -- - ------ - ---- -------------------- ---- ---------------------------------------- ---- --------------------------------------------- ------ -- - -------- - ------ - ------------- --------------------------------------- ---------------------------- ------------------------ -- --- ---------------------------------------- ------------------------------------------------------------ ------------- ------ --- --------- -- -- -- -- ------------------------- -- -- - -展开代码
现在你可以在你的 renderSuggestionsContainer 函数返回值中添加任何你需要的样式和内容。
键盘导航
最后，我们来介绍下 Autowhatever 支持的键盘导航功能。默认情况下，用户可以使用上下键选择元素，或者使用 Enter 键选择当前高亮的元素。
我们可以通过传递一些额外的键盘事件来定制这些行为。下面是一个例子，该例子重写了默认的键盘事件到定制函数 onKeyDown 中：
-- -------------------- ---- ------- ----- ---------------- ------- --------------- - -- --- ---------------- - ------ --------------- - ---- --- -- ----- -- ----------------------------- - ----------------------- ------------------------ ------------------------------------------------------- ------------------------ - ------ ---- --- -- ------ ----------------------- ------------------------ ------------------------ ------ ---- --- -- -- ----- ----------------------- ------------------------ ---------------------------------- ------ ---- --- -- ---- ----- ----------------------- ------------------------ ------------------------------ ------ -------- - - -------- - ------ - ------------- --------------------------------------- ---------------------------- ------------- ------ --- ---------- ------------------------- -- ------------------------- -- -- - -展开代码
在示例代码中，我们通过重写 onKeyDown 函数来自定义键盘事件，以在用户按下特定的按键时执行我们的自定义行为。
现在，我们已经实现了一个高效而强大的自动完成组件！
总结
在本教程中，我们学习了如何使用 react-autowhatever 模块来构建强大的自动完成组件。同时，我们介绍了如何实现搜索、高亮显示和自定义选项列表。最后，我们教学了如何添加键盘导航和其他交互行为，以进一步增强我们的组件。
希望这篇文章可以对你学习前端开发和实现自动完成组件带来帮助。如果你有任何问题或建议，请在下面的评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc85b5cbfe1ea06127f4
