标签：
At.js 是一个Twitter / Weibo样式的@自动完成插件。Demo演示（演示地址jQuery引入失效，导致演示失败）。
功能特性：
jQuery版本要求： 1.7.0+
项目主页：https://github.com/ichord/At.js。
为什么说这个插件好呢？代码简单好用，兼容性还不错，而且功能强大
可以自己定义各种符号作为触发条件，比如demo中：可以触发emoji表情 方便后期需求扩充
可以自己定义匹配规则，正则表达式可以自己定义
从demo上看可以在@内容中显示头像什么的，交互ui都不错，键盘操作也都支持
还有跨域的解决方案
一个@功能实现起来很简单，就比如上图中的代码， names作为数据源，当然也可以变成接口返回数据
只用把data：names 变成url，返回json数据就行(json数据中的字段对应tpl的字段)
然后给页面中的textarea绑定atwho就行
下载的demo中，发现数据中有中文，但是@只能联想到英文，不能联想到中文
解决方法：head中添加 <meta charset="UTF-8">
At.js 需要依赖于Caret.js这个插件，这个插件是用来定位的，在文本域输入时，在哪里输入就在那个出现提示框
插件的默认配置
|
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中的字段，比如是否空格后才触发，可以通过配置简单实现
插件默认使用的占位符是${},这个和jsp中的el表达式功能冲突，所以在jsp页面使用插件时
要么禁用el表达式（不推荐），要么就是把js变为一个js文件去引用，就解决了
自定义正则表达式匹配规则，加上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; } } }}); |
参考@红薯 的 OSCHINA @提到我 的处理代码，也不用考虑正则表达式的问题了，后台分分钟的事情啦
标签：
原文地址：http://www.cnblogs.com/hanfei-cn/p/4950380.html
