At.js 实战指南：10个从简单到复杂的应用场景

At.js 实战指南：10个从简单到复杂的应用场景

【免费下载链接】At.jsAdd Github like mentions autocomplete to your application.项目地址: https://gitcode.com/gh_mirrors/at/At.js

At.js 是一款强大的开源工具，能够为你的应用程序添加类似 GitHub 的提及（mention）自动完成功能。无论是社交平台、协作工具还是内容管理系统，At.js 都能轻松实现 @用户、#标签等智能提示功能，提升用户体验和输入效率。

一、快速入门：基础安装与配置

1.1 环境准备

使用 At.js 前，需确保项目中已引入 jQuery 和 Caret.js 依赖。推荐通过 npm 或手动下载方式安装：

git clone https://gitcode.com/gh_mirrors/at/At.js cd At.js npm install

1.2 核心文件引入

在 HTML 中引入必要的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="dist/css/jquery.atwho.css" /> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/Caret.js/dist/jquery.caret.js"></script> <script src="dist/js/jquery.atwho.js"></script>

二、基础场景应用

2.1 文本框中的@用户提示

最常见的应用场景是在评论或回复框中输入@符号时触发用户列表提示：

$('#comment-input').atwho({ at: "@", data: ["Alice", "Bob", "Charlie", "David"] });

此代码会在用户输入@后显示预设的用户列表，支持拼音和英文匹配。核心实现逻辑可参考 src/controller.coffee 中的事件监听与数据处理部分。

2.2 内容编辑器中的#标签自动完成

除了用户提及，At.js 还支持标签功能。通过修改at参数为#，即可实现标签提示：

$('#editable').atwho({ at: "#", data: ["design", "development", "marketing", "product"] });

示例代码可参考 examples/hashtags.html，该文件演示了如何在可编辑 div 中实现标签自动完成。

三、高级应用场景

3.1 与富文本编辑器集成

At.js 可与主流富文本编辑器无缝集成，以下是两个常见示例：

3.1.1 Medium Editor 集成

Medium Editor 是一款轻量级编辑器，通过以下代码可实现@提及功能：

var editor = new MediumEditor('#editor'); $('#editor').atwho({at: "@", data: userList});

完整示例见 examples/medium-editor.html，关键在于编辑器初始化后对内容区域绑定 At.js 事件。

3.1.2 TinyMCE 集成

TinyMCE 是功能全面的编辑器，集成时需注意在编辑器初始化回调中绑定 At.js：

tinymce.init({ selector: "#editor", init_instance_callback: function(editor) { $(editor.contentDocument.activeElement).atwho({at: "@", data: userList}); } });

详细实现可参考 examples/tinyMCE.html，其中处理了编辑器内部元素的事件委托。

3.2 自定义模板与样式

At.js 允许自定义下拉列表的显示模板和样式，例如添加用户头像：

$('#input').atwho({ at: "@", data: users, tpl: "<li>$('#search-input').atwho({ at: "@", ajax: { url: "/api/users", data: function(query) { return { q: query }; } } });

数据处理逻辑可参考 src/model.coffee 中的save和search方法。

3.4 多触发符号支持

At.js 支持同时配置多个触发符号，如同时支持@用户和#标签：

$('#content').atwho([ { at: "@", data: users }, { at: "#", data: tags } ]);

核心实现位于 src/app.coffee，通过管理多个 Controller 实例实现多符号支持。

3.5 跨文档通信

在 iframe 嵌套场景下，可通过 examples/cross_document/ 中的方案实现跨文档的自动完成，主要利用postMessage进行数据通信。

四、性能优化与最佳实践

4.1 数据缓存策略

对于频繁访问的数据源，建议实现本地缓存：

var cachedUsers = null; $('#input').atwho({ at: "@", data: function() { if (cachedUsers) return cachedUsers; return $.get("/api/users", function(data) { cachedUsers = data; }); } });

4.2 输入节流

为避免频繁请求，可设置输入延迟：

$('#input').atwho({ at: "@", delay: 300, // 300ms延迟 data: "/api/users" });

4.3 自定义事件处理

通过回调函数处理选中事件：

$('#input').atwho({ at: "@", data: users, callbacks: { afterInsert: function(value) { console.log("Selected: " + value); } } });

更多回调函数可参考 src/default.coffee 中的默认配置。

五、常见问题解决

5.1 与其他库的冲突

若出现事件冲突，可使用命名空间隔离：

$('#input').off('.atwho').atwho({ ... });

5.2 移动设备适配

At.js 已对移动设备做了优化，若需进一步调整，可修改 dist/css/jquery.atwho.css 中的媒体查询部分。

5.3 特殊字符处理

对于包含特殊字符的用户名，可通过escape方法处理：

data: users.map(user => ({ name: user.name, id: user.id }))

六、总结

At.js 提供了从简单到复杂的全方位自动完成解决方案，无论是基础的文本框提示还是复杂的富文本编辑器集成，都能轻松应对。通过灵活配置和自定义，可满足各种场景需求。项目源码和更多示例可在 spec/javascripts/ 目录中找到，建议结合测试用例深入学习其实现原理。

希望本指南能帮助你快速掌握 At.js 的使用技巧，为你的应用增添专业的提及功能！ 🚀

【免费下载链接】At.jsAdd Github like mentions autocomplete to your application.项目地址: https://gitcode.com/gh_mirrors/at/At.js