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都不错，键盘操作也都支持
- 还有跨域的解决方案
一个@功能实现起来很简单，就比如上图中的代码， 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;
}
}
}
});
|
[email protected]功能后端实现
参考@红薯 的OSCHINA @提到我 的处理代码，也不用考虑正则表达式的问题了，后台分分钟的事情啦
时间： 2024-10-10 17:06:21
