At.js 是一个Twitter / Weibo样式的@自动完成插件。Demo演示（演示地址jQuery引入失效，导致演示失败）。
功能特性：
- 可以监听任何字符，不仅仅只是’@‘，可以设置监听不同的字符和使用不同的数据。
- 支持同时使用静态数据和动态数据（通过AJAX），静态数据会被优先使用，然后再用AJAX加载找不到的值。
- 可以给多个文本框设置监听事件。
- 内置缓存支持。
- 可以使用模板设置数据的显示格式。
- 鼠标/键盘控制：Tab或Enter键选择，Up和Down键上下导航。
jQuery版本要求： 1.7.0+
项目主页：https://github.com/ichord/At.js。
为什么说这个插件好呢？代码简单好用，兼容性还不错，而且功能强大
-
可以自己定义各种符号作为触发条件，比如demo中：可以触发emoji表情 方便后期需求扩充
-
可以自己定义匹配规则，正则表达式可以自己定义
-
从demo上看可以在@内容中显示头像什么的，交互ui都不错，键盘操作也都支持
-
还有跨域的解决方案
使用方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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>
$('#inputor').atwho({
at: "@",
data:['Peter', 'Tom', 'Anne']
})
|
一个@功能实现起来很简单，就比如上图中的代码， names作为数据源，当然也可以变成接口返回数据
只用把data：names 变成url，返回json数据就行(json数据中的字段对应tpl的字段)
然后给页面中的textarea绑定atwho就行
友情提示1：
下载的demo中，发现数据中有中文，但是@只能联想到英文，不能联想到中文
解决方法：head中添加 <meta charset="UTF-8">
友情提示2：
At.js 需要依赖于Caret.js这个插件，这个插件是用来定位的，在文本域输入时，在哪里输入就在那个出现提示框
友情提示3：
插件的默认配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$.fn.atwho["default"] = { at: void 0, alias: void 0, data: null, tpl: "<li data-value='${atwho-at}${name}'>${name}</li>", insert_tpl: "<span id='${id}'>${atwho-data-value}</span>", callbacks: DEFAULT_CALLBACKS, search_key: "name", suffix: void 0, hide_without_suffix: false, start_with_space: true, highlight_first: true, limit: 5, max_len: 20, display_timeout: 300, delay: null}; |
注释如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/*可以定义规则*/var at_config = { at: "@", /*触发的条件*/ data: "user.json", /*数据来源 返回json数据*/ tpl: "<li data-value='@${name}'>${name}[${title}]</li>", /*选择前显示 ${json中的key} 选择后为data-value的值*/ search_key: "name", /*定义匹配字段*/ start_with_space: false, /*是否必须有空格后才能触发*/ limit: 10, /*显示记录条数*/ max_len: 20, display_timeout: 300, delay: null} |
可以通过覆盖默认值，定义匹配规则，比如定义显示数据的方式在tpl中配置
serch_key对应tpl中的字段，比如是否空格后才触发，可以通过配置简单实现
友情提示4：
插件默认使用的占位符是${},这个和jsp中的el表达式功能冲突，所以在jsp页面使用插件时
要么禁用el表达式（不推荐），要么就是把js变为一个js文件去引用，就解决了
友情提示5：
自定义正则表达式匹配规则，加上callbacks方法，不用修改源代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/*可以自定义匹配规则*/$('#inputor').atwho({ at: "@", callbacks: { matcher: function (flag, subtext) { var match, regexp, _a, _y; flag = flag.replace(/[-[]/{}()*+?.\^$|]/g, "\$&"); _a = decodeURI("%C3%80"); _y = decodeURI("%C3%BF"); regexp = new RegExp("" + flag + "([A-Za-z" + _a + "-" + _y + "0-9_+-]*)$|" + flag + "([^\x00-\xff]*)$", 'gi'); match = regexp.exec(subtext); if (match) { return match[2] || match[1]; } else { return null; } } }}); |
2.@功能后端实现
参考@红薯 的 OSCHINA @提到我 的处理代码，也不用考虑正则表达式的问题了，后台分分钟的事情啦