At.js 使用指南
At.js 是一个开源的自动完成库，灵感来源于 GitHub，它主要用于实现类似于微博或人人网中输入“@”符号后显示候选好友列表的功能，本文将详细介绍如何使用 At.js，包括其目录结构、配置文件、基本使用方法以及常见问题的解决方案。
一、项目目录结构及介绍
At.js 项目的目录结构如下：
At.js/ ├── dist/ │ ├── at.js │ └── at.min.js ├── src/ │ ├── at.coffee │ └── ... ├── examples/ │ ├── basic.html │ └── ... ├── Gruntfile.coffee ├── package.json └── README.md
dist/：包含编译后的 JavaScript 文件，包括压缩版和非压缩版。
src/：包含项目的源代码，主要使用 CoffeeScript 编写。
examples/：包含一些示例文件，展示如何使用 At.js。
Gruntfile.coffee：Grunt 任务配置文件，用于自动化构建。
package.json：项目的依赖和元数据信息。
README.md：项目的介绍和使用说明。
二、项目的启动文件介绍
At.js 的启动文件主要是dist/at.js 或dist/at.min.js，这两个文件是编译后的 JavaScript 文件，可以直接在 HTML 中引用。
<script src="path/to/at.js"></script>
在 HTML 文件中引入 at.js 后，可以通过以下方式初始化 At.js：
$(document).ready(function() {
$('textarea').atwho({
at: "@",
data: ["Alice", "Bob", "Charlie"]
});
});
三、项目的配置文件介绍
1. package.json
{
"name": "At.js",
"version": "1.5.4",
"description": "Add Github like mentions autocomplete to your application.",
"main": "dist/at.js",
"scripts": {
"test": "grunt test"
},
"dependencies": {
"jquery": ">=1.7.0"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-coffee": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^1.0.0"
}
}
name：项目名称。
version：项目版本。
description：项目描述。
main：入口文件。
scripts：定义了一些脚本命令，如 test。
dependencies：项目运行时依赖的库，如 jQuery。
devDependencies：开发时依赖的库，如 Grunt 相关插件。
2. Gruntfile.coffee
Gruntfile.coffee 是 Grunt 任务配置文件，用于自动化构建，它定义了如何编译 CoffeeScript 文件、如何压缩 JavaScript 文件等任务。
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
coffee:
src: 'src/at.coffee'
dest: 'dist/at.js'
watch:
coffee:
files: ['src/**/*.coffee']
tasks: ['coffee']
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.registerTask 'default', ['watch']
这个配置定义了一个默认任务，当运行grunt 命令时，会自动编译 CoffeeScript 文件并监控文件变化。
四、基本使用方法
1. HTML 文件引入必要的资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>At.js Example</title>
<link rel="stylesheet" type="text/css" href="styles/jquery.atwho.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.atwho.js"></script>
</head>
<body>
<div id="editable" class="inputor" contentEditable="true"></div>
<script type="text/javascript">
$(function(){
var at_config = {
at: "@", // 触发弹出菜单的按键
data: ['Peter', 'Tom', 'Anne'], // 候选数据
insertTpl: '<span data-id="${id}">@${name}</span>', // 插入模板
displayTpl: '<li>${name}</li>' // 显示模板
};
$('#editable').atwho(at_config); // 初始化 At.js
});
</script>
</body>
</html>
在这个例子中，我们创建了一个可编辑的div，并使用 At.js 实现了一个简单的自动完成功能，当用户输入 “@” 符号时，会显示一个下拉列表，其中包含 “Peter”、“Tom” 和 “Anne”。
2. JSON 数据源
At.js 支持从外部 JSON 文件获取候选数据。
<script type="text/javascript">
$(function(){
var at_config = {
at: "@", // 触发弹出菜单的按键
data: 'people.json', // JSON 数据源路径
insertTpl: '<span data-id="${id}">@${name}</span>', // 插入模板
displayTpl: '<li>${name}</li>' // 显示模板
};
$('#editable').atwho(at_config); // 初始化 At.js
});
</script>
假设people.json 的内容如下：
[{"id":"1","name":"李乾坤"},{"id":"2","name":"王锴"},{"id":"3","name":"孔德博"}]
这样，At.js 就会从people.json 文件中读取候选数据。
五、常见问题与解决方案
1. @符号无法触发自动完成
确保在 HTML 文件中正确引入了jquery.caret.js，因为 At.js 现在依赖于 Caret.js 来获取光标位置，可以在index.html 中添加以下代码：
<script type="text/javascript" src="path/to/jquery.caret.js"></script>
确保在初始化 At.js 时正确设置了at 选项。
$('#inputor').atwho({ at: "@", data: ['Alice', 'Bob', 'Charlie'] });
2. 点击无法聚焦无法输入问题
有时候会有残留的@ 的 DOM 元素导致失焦无法输入的问题，可以通过过滤空的和残缺的@ 标签来解决此问题。
$(document).on('focus', '[contenteditable]', function() {
var text = $(this).text().replace(/<span class="atwho-inserted"></span>/g, '');
$(this).html(text);
});
这段代码会在获得焦点时移除所有空的和残缺的@
At.js 是一个功能强大的自动完成库，适用于各种 Web 应用程序，通过简单的配置和灵活的 API，开发者可以轻松实现类似 GitHub 或 Twitter 的自动完成功能，At.js 将继续优化性能和兼容性，并增加更多实用功能，以满足更多场景的需求，希望本文能帮助大家更好地理解和使用 At.js。
小伙伴们，上文介绍了“atjs使用”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/644459.html
微信扫一扫 