在前端开发中，我们经常需要实现类似社交媒体平台的 @ 提醒功能。这时候，一个非常好用的 npm 包叫做 mention-completer 就能帮到我们了。本文将详细介绍如何使用这个 npm 包，让你的项目能够快速地实现 @ 提醒功能。
1. 安装
首先，我们需要安装 mention-completer 模块。打开命令行工具，输入以下命令：
npm install mention-completer --save
2. 使用
在安装了 mention-completer 模块之后，我们就可以在项目中使用了。下面我们将通过一个示例来详细介绍如何使用该模块。
2.1. 示例代码
-- -------------------- ---- -------
------ ---------------- ---- --------------------
-- -----
----- ---------- - -
-
----- --
------- ------
--
-
----- --
------- ------
--
--- -----------
--
-- --- -----------------
-----------------------
------ ------------------------------------
----------- -----------
--------- -------------- -
------------------
-
---2.2. 示例解释
在示例代码中，我们向 mentionCompleter.init() 函数传入了三个参数：
input: 要进行自动补全的输入框，我们使用 document.getElementById() 方法获取到了 textarea 元素。dataSource: 数据源，这里我们传入了一个包含多个对象的数组。onSelect: 当用户选择了一个 @ 列表中的选项时，我们通过回调函数获得了用户选择的选项对象。
3. 数据源
在使用 mention-completer 时，数据源是非常重要的。这决定了系统在进行自动补全操作时能显示哪些信息。通常情况下，数据源的格式应该为一个包含多个对象的数组。每个对象都应该包含 id 和 text 两个键，分别代表要显示的文本和对应的 id，例如：
-- -------------------- ---- -------
-
-
----- --
------- ------
--
-
----- --
------- ------
--
-
----- --
------- ------
--
-- ---------
-需要注意的是，你也可以把其他额外的字段放在对象中，这些字段会在选择时作为附加数据一同传递给回调函数。
4. 回调函数
在初始化 mention-completer 时，我们可以向 onSelect 属性传递一个回调函数。这个回调函数会在用户选择了一个选项时被调用，函数的参数是被选择的选项对象。
例如，在我们的示例代码中，如果用户在下拉列表中选择了 John ，那么就会在控制台输出如下信息：
{
"id": 1,
"text": "John"
}你可以根据这个选项对象进行下一步的操作，例如将其插入到文本区域中。
5. 结语
到此为止，我们已经成功地学习了如何使用 npm 包 mention-completer 来实现 @ 提醒功能。通过选择合适的数据源和回调函数，你可以根据自己项目的需要对该工具进行调整，让其更好地满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040ba4