当前位置：首页 > news >正文

终极At.js指南：打造高效@提及自动补全功能的完整教程

news 2026/5/28 12:14:53

终极At.js指南：打造高效@提及自动补全功能的完整教程

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

At.js是一款强大的JavaScript库，能为你的应用添加类似GitHub的@提及自动补全功能，让用户在输入时获得流畅的自动提示体验。本文将带你全面了解At.js的核心功能、安装方法和个性化配置技巧，帮助你快速在项目中实现专业级的自动补全交互。

🚀 为什么选择At.js？

在当今的Web应用中，用户期望获得流畅直观的交互体验。At.js通过以下特性脱颖而出：

多场景支持：完美适配文本框、富文本编辑器和iframe等多种输入场景
高度可定制：从提示样式到数据来源，全方位满足个性化需求
轻量高效：简洁的API设计和优化的性能，确保流畅体验
多触发符号：不仅支持@提及，还可配置其他触发符号（如:表情符号）

🔧 快速安装指南

1. 获取源码

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

2. 引入依赖

At.js需要jQuery和Caret.js的支持，确保在项目中正确引入这些依赖库：

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://ichord.github.io/Caret.js/src/jquery.caret.js"></script> <script src="dist/js/jquery.atwho.js"></script> <link rel="stylesheet" href="dist/css/jquery.atwho.css" />

⚙️ 基础配置与使用

简单@提及配置

以下是一个基本的@提及配置示例，实现类似GitHub的用户提及功能：

var names = [ {id: 1, name: "Jacob", email: "jacob@example.com"}, {id: 2, name: "Emma", email: "emma@example.com"}, // 更多用户数据... ]; $('#inputor').atwho({ at: "@", data: names, displayTpl: "<li>${name} <small>${email}</small></li>", insertTpl: '${name}' });

支持多种触发符号

At.js不仅支持@符号，还可以同时配置其他触发符号，如:用于表情符号：

var emojis = [ {key: "smile", name: "微笑"}, {key: "heart", name: "爱心"}, // 更多表情数据... ]; // 同时配置@提及和:表情 $('#inputor').atwho({ at: "@", data: names }).atwho({ at: ":", data: emojis, displayTpl: "<li>${name} <img src='emoji/${key}.png' height='20' width='20' /></li>", insertTpl: ':${key}:' });

🎨 个性化界面定制

自定义提示框样式

At.js提供了丰富的CSS类，让你可以轻松定制提示框的外观：

/* 自定义提示框头部 */ .atwho-header { background-color: #f5f5f5; padding: 5px 10px; border-bottom: 1px solid #eee; } /* 自定义提示项样式 */ .atwho-view .cur { background-color: #0078d7; color: white; }

自定义模板

通过displayTpl和insertTpl选项，你可以完全控制提示项的显示和插入格式：

{ displayTpl: "<li><img src='avatars/${id}.png' class='avatar' /> ${name}</li>", insertTpl: '<a href="/users/${id}">@${name}</a>' }

📝 高级应用场景

与富文本编辑器集成

At.js可以无缝集成到各种富文本编辑器中，如TinyMCE、UEditor等。项目中提供了多个集成示例：

TinyMCE集成示例
UEditor集成示例
Medium Editor集成示例

跨文档通信

对于iframe嵌套的复杂场景，At.js也提供了解决方案：

var ifr = document.getElementById('iframe1'); var doc = ifr.contentDocument || ifr.contentWindow.document; $(doc.body).atwho('setIframe', ifr).atwho(at_config);