At.js 快速开始指南：让你的应用拥有 GitHub 级体验

想要为你的应用添加像 GitHub 那样流畅的 @提及 自动完成功能吗？At.js 正是你需要的解决方案！这款轻量级的 jQuery 插件可以让你的用户轻松地提及他人、添加标签或表情符号，让交互体验更加自然流畅。😊

什么是 At.js？

At.js 是一个功能强大的自动补全库，专门用于实现类似 GitHub 的 @提及 功能。它支持多种输入方式，包括普通的 textarea 和 HTML5 contentEditable 元素，让用户在使用时感受到专业级的交互体验。

快速安装步骤

通过 npm 安装

npm install at.js

通过 git 克隆项目

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

基础配置方法

At.js 的配置非常简单直观，只需几行代码就能让你的应用拥有强大的自动完成功能：

$('#inputor').atwho({
    at: "@",
    data: ['Peter', 'Tom', 'Anne']
})

核心功能特性

多字符监听支持

At.js 不仅能监听 '@' 字符，还可以配置监听其他字符，比如 ':' 用于表情符号，'#' 用于标签等。

灵活的模板系统

你可以自定义数据显示模板，完全控制自动完成列表的外观和内容。

完善的键盘控制

• Tab 或 Enter 键选择值
• Up 和 Down 键在值之间导航
• Ctrl-P 和 Ctrl-N 同样支持导航

实际应用场景

与 Medium Editor 集成

查看 examples/medium-editor.html 示例，了解如何将 At.js 与流行的富文本编辑器集成。

跨文档支持

项目提供了 examples/cross_document/ 示例，展示在复杂场景下的应用。

兼容性说明

• textarea: Chrome, Safari, Firefox, IE7+
• contentEditable: Chrome, Safari, Firefox, IE9+

项目结构概览

• 源码目录: src/ - 包含所有核心实现
• 示例目录: examples/ - 提供多种使用场景的演示
• 测试目录: spec/ - 完整的测试套件

快速上手建议

1. 首先引入必要的依赖文件
2. 配置基本的 at.js 参数
3. 测试基本功能是否正常
4. 根据需求自定义模板和样式

注意事项

⚠️ 请注意：At.js 目前依赖 Caret.js 来处理光标位置和文本选择。

通过 At.js，你可以轻松地为你的应用添加专业级的自动完成功能，让用户体验更加流畅自然。无论是社交媒体应用、协作工具还是内容管理系统，At.js 都能完美胜任！🚀