At.js 多字符监听终极指南：轻松实现 @、、: 等多种触发方式的完整教程

At.js 多字符监听终极指南：轻松实现 @、#、: 等多种触发方式的完整教程

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

At.js 是一款强大的开源库，能够为你的应用添加类似 GitHub 的提及自动完成功能，支持 @、#、: 等多种触发字符，让用户输入体验更流畅。本文将详细介绍如何快速上手 At.js，掌握多字符监听的配置方法和实用技巧。

🌟 At.js 核心功能与优势

At.js 作为一款轻量级的自动完成库，具有以下核心优势：

• 多字符支持：同时监听 @（用户提及）、#（标签）、:（表情符号）等多种触发字符
• 高度可定制：支持自定义模板、数据来源和显示样式
• 跨场景兼容：完美支持文本框（textarea）、富文本编辑器（如 TinyMCE）和内容可编辑元素（contenteditable）
• 轻量高效：体积小巧，性能优异，不会影响页面加载速度

🚀 快速开始：5 分钟集成 At.js

1️⃣ 安装与引入

你可以通过以下方式获取 At.js：

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

在 HTML 文件中引入必要的依赖：

<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>

2️⃣ 基础配置示例

以下是一个同时配置 @ 提及和 : 表情符号的示例：

// 用户数据 var names = ['Alice', 'Bob', 'Charlie', 'David']; var emojis = ['smile', 'smiley', 'coffee', 'thumbsup']; // @ 配置 var at_config = { at: "@", data: names, headerTpl: '<div class="atwho-header">Member List<small>↑&nbsp;↓&nbsp;</small></div>', insertTpl: '${name}', displayTpl: "<li>${name} <small>${email}</small></li>", limit: 200 }; // : 配置 var emoji_config = { at: ":", data: emojis, displayTpl: "<li>${name} <img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png' height='20' width='20' /></li>", insertTpl: ':${key}:', delay: 400 }; // 应用到输入框 $('#inputor').atwho(at_config).atwho(emoji_config);

⚙️ 高级配置：定制你的自动完成体验

自定义触发字符与数据

At.js 支持任意字符作为触发符，例如配置 # 标签功能：

var hashtag_config = { at: "#", data: ['javascript', 'html', 'css', 'react', 'vue'], displayTpl: "<li>${name}</li>", insertTpl: '#${name}' }; $('#inputor').atwho(hashtag_config);

支持富文本编辑器

At.js 可以轻松集成到主流富文本编辑器中，例如 TinyMCE：

// TinyMCE 集成示例 tinymce.init({ selector: '#editor', setup: function(editor) { editor.on('init', function() { $(editor.contentDocument.activeElement).atwho({ at: "@", data: names }); }); } });

事件回调与交互优化

通过事件回调可以实现更复杂的交互逻辑：

$('#inputor').atwho(at_config) .on('atwho:selected', function(event, data) { console.log('选中了:', data.name); }) .on('atwho:shown', function() { console.log('下拉框显示了'); });

📝 实际应用场景

社交平台 @ 好友功能

在社交应用中，用户输入 @ 后自动显示好友列表，提升互动体验。

内容管理系统标签推荐

使用 # 触发标签推荐，帮助用户快速添加文章标签。

即时通讯表情选择器

通过 : 触发表情选择器，让聊天更生动有趣。

📚 学习资源与文档

• 项目源码：src/
• 示例代码：examples/
• 测试用例：spec/

💡 实用技巧

1. 性能优化：对于大量数据，使用limit参数限制显示数量
2. 样式定制：通过修改 src/jquery.atwho.css 自定义下拉框样式
3. 延迟加载：使用delay参数避免频繁触发
4. 多实例共存：同一页面可以为不同元素配置不同的触发规则

At.js 凭借其灵活的配置和强大的功能，成为实现自动完成功能的理想选择。无论是简单的 @ 提及还是复杂的多字符触发场景，At.js 都能满足你的需求，让用户输入体验提升到新的水平。

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