在前端开发中，提及其他用户或者团队成员是非常常见的需求。为此，我们可以使用一个非常实用的npm包：jquery-mention。
安装 jquery-mention
在使用 jquery-mention 之前，需要确保安装了 jQuery。
安装 jquery-mention，有两种方式：
- 使用 npm 安装
npm install jquery-mention
- 下载最新版的jquery-mention.js文件，并在页面中引入
引入 jquery-mention
引入 jquery-mention 主要有以下两步：
- 引入 jQuery
<script src="//cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
- 引入 jquery-mention.js
<script src='jquery.mention.js'></script>
jquery-mention 使用说明
配置 jquery-mention
- 配置语法
-- -------------------- ---- -------
-------------
------------------------
---------- ----
-------- -----
---------------
--------------
------------
---------
---
---- 配置参数说明
delimiter：表示触发 mention 的字符，这里设置为 '@'
queryBy：用于查询 mention 数据的函数，这里没有设置，在后面的使用示例中会进行介绍
sensitive：表示是否区分大小写，默认为true
searchOpts：用于传递搜索参数的自定义对象
userOpts：用于传递用户信息的自定义对象
events：用于配置事件的对象
编写 autocomplete 函数
autocomplete 函数用于检索 mention 数据，为了简化，我们暂时将 mention 数据写在一个数组里，从中匹配符合输入的 mention。
-- -------------------- ---- -------
------------- ------- --
--- -------- - -
- ------- ------------- --
- ------- --------------- --
- ------- -------------- --
- ------- ------------- --
- ------- -------------- -
--
---- ------------ --
-------- ------------------- ------
---------------
--- ----------- - ---
---- -------- ---------- -------
-------------------------------
---------------------------------------------------------- --- ----
------------------
----------------
---------------------
---
-
---
---------- ---- --
------------------
-绑定输入框
在 HTML 代码中，需要对某个输入框绑定 jquery-mention，如下所示：
<textarea id='textarea'></textarea>
实现绑定操作
在代码中，需要将 autocomplete 函数绑定到输入框中：
$(function(){
$('#textarea').mention({
delimiter: '@',
queryBy: autocomplete
});
});jquery-mention 实现示例
下面，我们将 jquery-mention 的使用示例展示出来。
- HTML 文件中添加 input 元素
<div class="form-group">
<input type="text" id="input" class="form-control">
</div>- 在 JS 文件中，加载相关资源
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script src="jquery.mention.js"></script>
- 编写 autocomplete 函数
-- -------------------- ---- -------
---
- ---------
- ------ -------- ----- - -------
- ------ ---------- ---- - ------------
- ------- ------
--
-------- ------------------- ----- -
-- ------------
------------- -- -
--- -------- - --
----- --
-------- ------------
--
-
----- --
-------- -----
--
-
----- --
-------- ------
--
-
----- --
-------- --------
--
-
----- --
-------- ----------
--
-
----- --
-------- ------------
-
--
-------- - ----------------------- -- ------------------------------- -- ----------
--------------- -- -------------
-- ------ -- ---------
-- 在初始化函数中激活 jquery-mention
$(function() {
$('#input').mention({
delimiter: '@',
queryBy: autocomplete
});
});- 实现效果展示
- 打开浏览器，在输入框内输入 '@' 字符，会出现自动完成菜单并触发 autocomplete 函数进行相关联想查询：
- 选择一个菜单项后，能够自动添加 '@' 并追加关联词到当前的输入框
总结
通过本文，我们了解了 jquery-mention 的使用方法，并展示了 jquery-mention 的实现示例。在实现的过程中，我们需要使用 jquery-mention 提供的配置方法，并编写 autocomplete 函数实现 mention 数据的自动联想查询。熟练使用 jquery-mention 能够极大地提升我们开发的效率，为代码编写带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c081e8991b448e315d