`npm` 包 `react-autowhatever` 使用教程

react-autowhatever 是一个基于 React 实现的自动完成组件库，它可以帮助我们实现各种自动完成的功能——比如呈现匹配列表、高亮匹配词汇、复杂的键盘导航和交互等等。

在本篇文章中，我们将介绍如何使用 react-autowhatever 来实现一个简单的自动完成组件，并逐步介绍它提供的各种功能和选项。

安装

首先，我们需要利用 npm 来安装 react-autowhatever。在终端中打开你的项目目录，输入下面的命令：

--- ------- ------------------ ------

这将会把 react-autowhatever 加入到你的项目中，并把它添加到你的 package.json 文件的依赖中。接下来，我们就可以开始在代码中使用它了。

基本使用

让我们来看一个最简单的例子，实现一个输入框，当用户输入时，页面上展示这个输入框内的文本。首先，我们需要引入 react-autowhatever 模块。在你的 JS 文件中加入一行类似下面的代码：

------ ------------ ---- ---------------------

然后，我们需要实现一个 renderInput 函数，该函数将在我们的组件中呈现一个输入框。代码如下所示：

------ ----- ---- --------

----- ---------------- ------- --------------- -
  ------------------ -
    ----- - ------ -------- - - ------
    ------ -
      ------
        -----------
        -------------
        ----------- -- -------------------------
      --
    --
  -
  
  -------- -
    ------ -
      -------------
        ---------------------------------------
        ------------- ------ --- --------- -- -- -- --
        -------------------------
      --
    --
  -
-

我们首先在 renderInput 函数中定义了一个简单的文本输入框。该函数会被传入 Autowhatever 实例中作为一个名为 renderInputComponent 的选项。

在 render 方法中，我们创建一个 Autowhatever 实例，并将 renderInputComponent 设置为 renderInput。当我们的组件被渲染时，Autowhatever 就会自动使用 renderInput 来呈现输入框。

现在，运行你的应用，你会看到你的页面上有了一个输入框。

对接数据源

遗憾的是，上面的例子中我们并没有与任何数据源对接。接下来，我们将展示如何通过 Autowhatever 简单地对接一个静态数据源。

首先，我们需要定义一个数组，其中包含了我们的搜索建议列表：

----- ----------- - -
  - ----- -------- ------ ----------- --
  - ----- --------- ------ ------- --
  - ----- --------- ------ ----------- --
  - ----- ------- ------ ----------- --
  - ----- ------------- ------ ----------- --
  - ----- ------ ------ ---------- --
  - ----- ------------- ------ ----------- --
  - ----- ----------- ------ ------- --
  - ----- ---------- ------ ----------- --
  - ----- ------------ ------ ----------- --
  - ----- ------- ------ ---------- --
  - ----- -------- ------ ----------- --
  - ----- -------- ------ ------- --
  - ----- ------------ ------ ----------- --
  - ----- --------- ------ ----------- --
  - ----- ------- ------ ----------- --
  - ----- --------- ------ ----------- --
  - ----- ------------ ------ ----------- --
  - ----- ------------- ------ ----------- --
  - ----- ------------ ------ ----------- --
  - ----- ----- ------- ------ ----------- --
  - ----- -------- ------ ------ ----------- --
  - ----- ------------- ------ ------- --
  - ----- ------- ------ ----------- --
  - ----- ----------- ------ ------- -
--

接下来，我们定义一个函数，该函数将在用户输入时调用，以获取该文本框的搜索结果：

-------- --------------------- -
  ----- ---------- - ---------------------------
  ----- ----------- - ------------------
 
  ------ ----------- --- - --
    ------------ - - -- --------------------- -- -------------------------------- ------------ --- ------------
    - ----------------------- -- ---------------------------------------------
    - ---
-

这个函数接受一个字符串参数，并且针对该值与数组中的每个项目进行比较以获取搜索结果。我们将这个函数传递给 Autowhatever 的 suggestions 选项中，如下所示：

-------- --------------------- -
  ----- ---------- - ---------------------------
  ----- ----------- - ------------------
 
  ------ ----------- --- - --
    ------------ - - -- --------------------- -- -------------------------------- ------------ --- ------------
    - ----------------------- -- ---------------------------------------------
    - ---
-

----- ---------------- ------- --------------- -
  ------------------ -
    ----- - ------ -------- - - ------
    ------ -
      ------
        -----------
        -------------
        ----------- -- -------------------------
      --
    --
  -
  
  -------- -
    ------ -
      -------------
        ---------------------------------------
        ----------------------------
        ------------- ------ --- --------- -- -- -- --
        -------------------------
      --
    --
  -
-

现在运行你的应用即可看到，当用户输入时匹配的搜索结果会自动显示在下方的列表中。

高亮词汇

让我们来添加一个高亮词汇的功能，这样我们的搜索结果中匹配的字符会自动高亮显示。

首先，我们需要通过安装 react-highlight-words 模块来实现高亮。在终端中运行以下命令：

--- ------- ------ ---------------------

接下来，我们需要在 renderSuggestion 函数中进行高亮的定制。在这个函数中，我们将遍历我们的搜索结果，标记其中匹配的字符并返回一个新数组。

------ ----------- ---- ------------------------

----- ---------------- ------- --------------- -
  -- ---
  
  ---------------------------- ------ - ----- -- -
    ----- -------------- - ----------------
    ----- ------- - --------------------- -------
    ----- ----- - --------------------- ---------
    
    ------ -
      ----- ------------
        ------------
          ------------------------------
          ---------------------
          -----------------
          ------------------------------- -- -----------
        --
      -------
    --
  -
  
  -------- -
    ------ -
      -------------
        ---------------------------------------
        ----------------------------
        ------------------------ -- ---
        ----------------------------------------
        ------------- ------ --- --------- -- -- -- --
        -------------------------
      --
    --
  -
-

在 Highlighter 组件的属性中，我们需要把匹配的部分替换成一个 span 元素，并且给它加上一个 CSS 类名 highlight。

现在再次运行你的应用，你会发现匹配的部分会自动高亮显示。

自定义选项列表

到目前为止，我们已经妥善处理了搜索和高亮处理，并成功展示了选项列表。现在我们来介绍如何自定义选项列表。

首先，我们需要定义一个 renderSuggestionsContainer 函数，该函数将返回我们自定义的组件（比如一个 div 元素），而不是默认呈现的列表。在这个函数中，我们可以根据需要添加各种样式和逻辑。

----- ---------------- ------- --------------- -
  -- ---
  
  ---------------------------- --------------- -------- -- -
    ------ -
      ---- --------------------
        ---- ----------------------------------------
        ---- ---------------------------------------------
      ------
    --
  -
  
  -------- -
    ------ -
      -------------
        ---------------------------------------
        ----------------------------
        ------------------------ -- ---
        ----------------------------------------
        ------------------------------------------------------------
        ------------- ------ --- --------- -- -- -- --
        -------------------------
      --
    --
  -
-

现在你可以在你的 renderSuggestionsContainer 函数返回值中添加任何你需要的样式和内容。

键盘导航

最后，我们来介绍下 Autowhatever 支持的键盘导航功能。默认情况下，用户可以使用上下键选择元素，或者使用 Enter 键选择当前高亮的元素。

我们可以通过传递一些额外的键盘事件来定制这些行为。下面是一个例子，该例子重写了默认的键盘事件到定制函数 onKeyDown 中：

----- ---------------- ------- --------------- -
  -- ---
  
  ---------------- -
    ------ --------------- -
      ---- --- -- -----
        -- ----------------------------- -
          -----------------------
          ------------------------
          -------------------------------------------------------
          ------------------------
        -
        ------
 
      ---- --- -- ------
        -----------------------
        ------------------------
        ------------------------
        ------
 
      ---- --- -- -- -----
        -----------------------
        ------------------------
        ----------------------------------
        ------
 
      ---- --- -- ---- -----
        -----------------------
        ------------------------
        ------------------------------
        ------
 
      --------
    -
  -
  
  -------- -
    ------ -
      -------------
        ---------------------------------------
        ----------------------------
        ------------- ------ --- ---------- ------------------------- --
        -------------------------
      --
    --
  -
-

在示例代码中，我们通过重写 onKeyDown 函数来自定义键盘事件，以在用户按下特定的按键时执行我们的自定义行为。

现在，我们已经实现了一个高效而强大的自动完成组件！

总结

在本教程中，我们学习了如何使用 react-autowhatever 模块来构建强大的自动完成组件。同时，我们介绍了如何实现搜索、高亮显示和自定义选项列表。最后，我们教学了如何添加键盘导航和其他交互行为，以进一步增强我们的组件。

希望这篇文章可以对你学习前端开发和实现自动完成组件带来帮助。如果你有任何问题或建议，请在下面的评论区留言。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcc85b5cbfe1ea06127f4

阅读全文

猜你喜欢

  • npm 包 basscss-type-scale 使用教程

    在Web开发过程中，设置好的文本字体大小和行高将会是整个页面视觉感受的核心，往往因此不断进行调整以达到更好的视觉效果。basscss-type-scale是一个使用方便、效果出色的npm包，旨在帮助我...

    4 年前
  • npm 包 echoecho 使用教程

    介绍 echoecho 是一个前端常用的 npm 包，它可以在控制台输出彩色的文本信息，可用于调试、提示等场景。本文将带你深入了解 echoecho 的使用方法，以及如何在项目中使用它。

    4 年前
  • npm 包 eventyoshi 使用教程

    简介 eventyoshi 是一个轻量级的、面向事件驱动的 JavaScript 库。该库提供了一种基于事件的编程模型，允许用户使用自定义事件来组织代码和逻辑。通过使用 eventyoshi，用户可以...

    4 年前
  • npm 包 Onyx 使用教程

    Onyx 是一个用于创建 Web 应用程序的轻量级框架。它提供了一组工具和技术，使得开发 Web 应用程序变得更加容易和高效。通过使用 Onyx，开发者可以快速构建出高质量的 Web 应用程序，并且可...

    4 年前
  • Npm 包 Yeti 使用教程

    随着前端技术的不断发展，我们已经有了许多优秀的开发工具。其中，npm 是我们不可或缺的一部分，npm 包 Yeti 更是前端工程师们不可或缺的一项技能。因此，本文将为大家介绍如何使用 Yeti。

    4 年前
  • npm 包 bunyip 使用教程

    简介 bunyip 是一个简单而又强大的 npm 日志包，在前端开发过程中很有用。它可以帮助您更轻松地管理和记录网站或应用程序中的日志。 安装 您可以使用 npm 命令安装 bunyip： --- -...

    4 年前
  • npm 包 basscss-position 使用教程

    在前端开发中，样式是其中一个非常重要的部分。而为了方便开发，我们通常会使用一些现成的样式库。basscss-position 就是其中一个非常不错的 npm 包，它可以帮助我们更快速地编写出响应式的布...

    4 年前
  • npm 包 Supersonic 使用教程

    Supersonic 是一个基于 AngularJS 的前端开发框架，它提供了丰富的组件和工具，可以帮助你快速构建出高质量的移动应用。本文将介绍如何使用 npm 包 Supersonic，并提供详细的...

    4 年前
  • npm 包 coverjs 使用教程

    在前端开发领域中，代码覆盖率是一个很重要的指标。它可以衡量应用程序中代码的质量和可靠性。而 coverjs 是一个可以帮助实现代码覆盖率测试的 npm 包，下面我们将详细介绍 coverjs 的使用教...

    4 年前
  • npm 包 peerjs-js-binarypack 使用教程

    什么是 peerjs-js-binarypack peerjs-js-binarypack 是一个基于二进制编码的数据格式化和解析库，它可以帮助我们在使用 PeerJS 进行网络通信时将数据转换成二进...

    4 年前
  • npm 包 mosse 使用教程

    前言 在前端开发当中，我们经常需要进行动画效果的实现。而实现动画效果除了使用 CSS3 动画之外，还可以使用 JavaScript 动画库来完成。而 mosse 就是一款非常优秀的 JavaScrip...

    4 年前
  • npm包 qunit-semantic-assertions的使用教程

    什么是qunit-semantic-assertions qunit-semantic-assertions 是一个 npm 包，它提供了一组语义化的断言函数，用于 QUnit 测试框架中的单元测试。

    4 年前
  • npm 包 aria-api 使用教程

    前言 在前端开发中，我们经常需要访问 web 页面的许多无障碍（accessible）特性，这些特性有一个公共的接口，也就是 ARIA（Accessible Rich Internet Applica...

    4 年前
  • npm 包 semantic-dom-selectors 使用教程

    在前端开发中，DOM 选择器是必不可少的工具。然而，在选择器语法上，很多开发者并没有使用正确的方式，导致代码冗长、不易维护。为了解决这个问题，npm 包 semantic-dom-selectors ...

    4 年前
  • npm 包 ember-semantic-test-helpers 使用教程

    在使用 Ember.js 进行 Web 应用开发过程中，一项非常重要的工作便是编写测试代码以保证质量。而在编写测试时，我们可能会需要对 DOM 进行操作并对其进行断言判断。

    4 年前
  • npm 包 basscss-padding 使用教程

    Basscss 在前端 CSS 框架中颇受欢迎，因为它的简单、清晰和易于使用。Basscss-padding 是 Basscss 系列中的一个 npm 包，它提供了一些便利的样式类，方便我们对 pad...

    4 年前
  • npm 包 @types/webrtc 使用教程

    WebRTC 是一种支持浏览器端实时通信 (Real-Time Communications, RTC) 的技术。@types/webrtc 是 WebRTC TypeScript 类型定义文件的 ...

    4 年前
  • npm 包 basscss-margin 使用教程

    前言 在网页设计中，元素之间的间距非常重要，它们可以改变页面的整体感觉和视觉层次。平衡和比例是设计中的重要部分，其中间距和边距被用来控制元素之间的位置和相对大小。 如果您是前端工程师或者网页设计师，您...

    4 年前
  • npm 包 basscss-layout 使用教程

    介绍 Basscss 是一种极简的 CSS 框架，拥有模块化的设计、低耦合度和易于学习和使用的特点。该框架的核心思想是使用类名来描述网页布局和样式，以此实现快速搭建网页和易于维护样式的目的。

    4 年前
  • npm 包 basscss-hide 使用教程

    前言 在前端开发中，我们经常需要隐藏某些元素或者组件，以满足某些特定的设计需求。而 CSS 的 display:none 效果虽然精准，但是对于动态隐藏或者条件隐藏这类操作来说却不是很方便。

    4 年前

相关推荐

    暂无文章