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

终极指南：At.js如何让你的应用拥有GitHub级别的智能补全功能

news 2026/5/28 10:33:31

终极指南：At.js如何让你的应用拥有GitHub级别的智能补全功能

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

At.js是一款强大的智能补全库，能够为你的Web应用添加类似GitHub的**@提及自动完成功能。无论是社交媒体应用、协作工具还是内容管理系统，At.js都能显著提升用户输入体验，让智能补全**变得简单易用。

🚀 为什么选择At.js？

At.js是一个轻量级的jQuery插件，专门用于实现**@提及自动完成**功能。它支持多种输入元素，包括传统的textarea和现代的contentEditable元素，让你可以在任何Web应用中轻松集成GitHub风格的智能补全功能。

核心功能亮点 ✨

多字符监听- 不仅支持@字符，还可以监听任何字符如#、:等
键盘导航- 支持Tab、Enter、Up、Down等键盘快捷键
模板渲染- 自定义数据显示格式
回调函数- 丰富的回调机制支持自定义逻辑
跨浏览器兼容- 支持IE7+（textarea）和IE9+（contentEditable）

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

安装步骤

首先，通过Bower或直接下载方式获取At.js：

bower install jquery.atwho

或者直接下载最新版本并包含以下文件：

<link href="css/jquery.atwho.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.caret.js"></script> <script src="js/jquery.atwho.js"></script>

基础使用示例

在你的JavaScript代码中添加以下配置：

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

就是这么简单！现在你的输入框就拥有了GitHub风格的智能补全功能。

🎯 高级配置与自定义

多字符监听配置

At.js支持同时监听多个字符，每个字符可以有不同的数据源和行为：

$('#inputor').atwho({ at: "@", data: users, displayTpl: "<li>${name} <small>${email}</small></li>" }).atwho({ at: "#", data: tags, searchKey: "name", limit: 10 });

自定义数据源

你可以使用Ajax动态加载数据：

$('#inputor').atwho({ at: "@", data: function(query, callback) { $.getJSON("/users/search", {q: query}, function(data) { callback(data); }); } });

回调函数配置

At.js提供了丰富的回调函数，让你可以完全控制补全流程：

$('#inputor').atwho({ at: "@", data: users, callbacks: { beforeSave: function(data, query) { // 数据保存前的处理 return data; }, afterMatchFailed: function(at, el) { // 匹配失败后的处理 console.log("匹配失败"); }, remoteFilter: function(query, callback) { // 远程过滤逻辑 callback(filteredData); } } });

🔧 项目结构与源码解析

了解At.js的项目结构有助于深入定制和扩展：

核心控制器：src/controller.coffee - 主要控制逻辑
视图组件：src/view.coffee - 界面渲染逻辑
数据模型：src/model.coffee - 数据管理
API接口：src/api.coffee - 外部API接口
默认配置：src/default.coffee - 默认设置

示例文件

At.js提供了丰富的示例文件，帮助你快速上手：

标签功能示例：examples/hashtags.html - 实现#标签自动补全
Medium编辑器集成：examples/medium-editor.html - 与Medium编辑器集成
跨文档示例：examples/cross_document/ - 复杂场景应用
TinyMCE集成：examples/tinyMCE.html - 与TinyMCE编辑器集成

🎨 样式定制与主题

At.js提供了灵活的样式定制选项。你可以通过修改CSS文件或使用回调函数来自定义外观：

/* 自定义At.js样式 */ .atwho-container { background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .atwho-ul { list-style: none; margin: 0; padding: 5px 0; } .atwho-li { padding: 8px 15px; cursor: pointer; } .atwho-cur { background: #f0f7ff; }

🚀 性能优化技巧

1. 数据懒加载

对于大量数据，使用懒加载技术：

$('#inputor').atwho({ at: "@", data: function(query, callback) { if (query.length < 2) { callback([]); return; } // 只有查询长度大于2时才请求数据 loadDataFromServer(query, callback); } });

2. 缓存机制

实现数据缓存减少服务器请求：

var cache = {}; $('#inputor').atwho({ at: "@", data: function(query, callback) { if (cache[query]) { callback(cache[query]); return; } $.getJSON("/search", {q: query}, function(data) { cache[query] = data; callback(data); }); } });

3. 防抖处理

使用防抖技术优化频繁输入场景：

var debounceTimer; $('#inputor').atwho({ at: "@", data: function(query, callback) { clearTimeout(debounceTimer); debounceTimer = setTimeout(function() { performSearch(query, callback); }, 300); } });