简介
atwho.js 是一个用于实现类似于 @提及功能的 JavaScript 库，它可以帮助开发者在文本框中实现自动完成和高亮显示用户的功能，通过简单的配置，就可以在各种 Web 应用中集成该功能。
安装与使用
安装
可以通过 CDN 或者 npm 安装 atwho.js。
通过 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/atwho@2.1.4/dist/jquery.caret.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/atwho@2.1.4/dist/jquery.atwho.min.js"></script>
通过 npm 安装
npm install atwho
基本使用
以下是一个简单的示例，演示如何使用 atwho.js 实现 @提及功能。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>atwho.js Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/atwho@2.1.4/dist/css/jquery.caret.css">
<style>
.atme_list {
max-height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
}
.atme_item {
padding: 5px;
cursor: pointer;
}
.atme_item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<textarea id="myTextarea" rows="10" cols="30"></textarea>
<div id="atme_list" class="atme_list"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/atwho@2.1.4/dist/jquery.caret.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/atwho@2.1.4/dist/jquery.atwho.min.js"></script>
<script>
$(document).ready(function() {
$('#myTextarea').atwho({
at: "@",
data: ['Alice', 'Bob', 'Charlie'],
displayTpl: '<li class="atme_item" data-value="${name}" data-symbol="@">${name}</li>',
insertTpl: '[${name}]',
searchKey: 'name',
limit: 10,
callbacks: {
remoteFilter: function(query, callback) {
setTimeout(function() {
callback(query); // 模拟异步请求，返回查询结果
}, 200);
}
}
});
});
</script>
</body>
</html>
配置选项
| 参数名 | 描述 |
| at | 触发符号，默认为@ |
| data | 数据源，可以是数组或函数 |
| displayTpl | 显示模板，用于生成下拉列表项的 HTML 结构 |
| insertTpl | 插入模板，用于替换选中的用户名称 |
| searchKey | 数据源中的键，默认为value |
| limit | 最大显示数量，默认为 10 |
| callbacks | 回调函数，包括remoteFilter、beforeInsert 等 |
常见问题与解答
问题1：如何在远程服务器上获取数据？
解答：可以使用remoteFilter 回调函数来从远程服务器获取数据。
callbacks: {
remoteFilter: function(query, callback) {
$.ajax({
url: '/api/users',
dataType: 'json',
success: function(data) {
callback(data); // 将返回的数据传递给回调函数
}
});
}
}
问题2：如何自定义插入模板？
解答：可以通过insertTpl 参数来自定义插入模板。
insertTpl: '<b>${name}</b>'
这将使被提及的用户名称以加粗形式插入到文本框中。
以上就是关于“atwho.js”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/646351.html
微信扫一扫 