html5 表情插件,仿github表情符号和at自动完成jquery插件

At.js是一款仿github表情符号和at自动完成jquery插件。通过At.js插件，可以在表单，后某个可编辑的div元素，或某些所见即所得的文本编辑器中，通过快捷方式来自动补全表情符号，或at某人的操作。At.js插件的特点还有：

支持IE7+的textarea元素。

支持HTML5 contentEditable元素(不包括IE8).

可以监听任何字符，不单单只是@字符。

使用模板来返回格式化数据。

支持键盘控制。

支持AMD。

使用方法

该插件依赖于jquery.caret.js。在使用是要引入jquery，jquery.caret.js，jquery.atwho.css和jquery.atwho.js文件。

初始化插件

At.js插件最基本的用法如下：

$('.atwho-inputor').atwho({

at: "@",

data: ["one", "two", "three"],

}).atwho({

at: ":",

data: ["+1", "-1", "smile"]

});

配置参数

At.js插件的可用配置参数如下：

$('.atwho-inputor').atwho({

// key char for observing such as `@`

at: void 0,

/*

alias name of `at`

it would be an id attribute of the popup view.

*/

alias: void 0,

/*

should be a plain object *Array* or a *URL*

would save *Array* directly.

would load and save remote JSON data by *URL*

*/

data: null,

/*

Would render the passed value at the top of the selector popup.

*/

headerTpl: "

Select a user

/*

would eval it and assign value of the key contained in `${}`

key-value ( {'name': "one"} ) is an item in `data` Array.

Alternatively, this can be a function accepting one data item as a parameter.

*/

displayTpl: "

/*

It will be evaluated and inserted in the inputor.

`atwho-at` is the `at` for runtime by default.

You change it into anything you want.

*/

insertTpl: "${atwho-at}${name}",

/*

There are several data processors that can be overriden here such as `filter`.

we will cover it later.

*/

callbacks: DEFAULT_CALLBACKS,

/*

would matching item by test against the value of this `search_key` with query string.

*/

searchKey: "name",

/*

limit number of items to show in popup list.

*/

limit: 5,

/*

setting the max length of the string after `at` that would be matched

It will stop matching if the query string is longer than `max_len`.

*/

maxLen: 20,

/*

if `yes`, At.js will match the query with a spaaace before the `at`.

*/

startWithSpace: true,

// time in ms to persist the popup menu for after blurring from the invoking text field

displayTimeout: 300,

// highlight_first suggestion in popup menu

highlightFirst: true,

// delay time trigger At.js while typing. For example: delay: 400

delay: null,

// suffix for inserting string.

suffix: undefined,

// don't show dropdown view without `suffix`

hideWithoutSuffix: false,

// Add attribute to the inserted element for contenteditable mode

// check out the issue: https://github.com/ichord/At.js/issues/253#issuecomment-75694945

editableAtwhoQueryAttrs: {}

});

应用示例

自定义模板

你可以自定义要在自动完成列表中显示的内容，如显示一个头像，或一个表情符号。

一个有效的模板必须是一个

你可以在

var emojis = ["smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee"];

var emojisList = $.map(emojis, function(value, i) {

return {'id':i, 'name':value};

});

//http://a248.e.akamai.net/assets.github.com/images/icons/emoji/8.png

$(".container textarea").atwho({

at: ':',

displayTpl: "

insertTpl: ":${name}:",

data: emojisList

});

注册多个at关键字

At.js可以监听多个at关键字，并且每个关键字都有自己的配置。

var emojis = ["smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee"];

var names = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia", "Alexander", "Sophia", "William", "Ava", "Joshua", "Emily", "Daniel", "Madison", "Jayden", "Abigail", "Noah", "Chloe", "你好", "你你你"];

var emojisList = $.map(emojis, function(value, i) {

return {'id':i, 'name':value};

});

var issues = [

{ name: "1", content: "stay foolish"},

{ name: "2", content: "stay hungry"},

{ name: "3", content: "stay heathly"},

{ name: "4", content: "this happiess"},

];

$(".container textarea")

.atwho({

at: "@",

data: names

})

.atwho({

at: "#",

displayTpl: '

data: issues

})

.atwho({

at: ":",

displayTpl: "

insertTpl: ':${name}:',

data: emojisList

});

远程加载更多数据

当你从某个URL获取数据时，At.js将执行AJAX请求异步加载更多json数据。

$('textarea').atwho({

at: "@",

data: "http://www.atjs.com/users.json",

limit: 7

});

定义查询条件

如果你想支持unicode编码，你可以自定义查询条件。

$('#inputor').atwho({

at: "@",

callbacks: {

matcher: function(flag, subtext) {

var match, matched, regexp;

regexp = new XRegExp('(\s+|^)' + flag + '(\p{L}+)$', 'gi');

match = regexp.exec(subtext);

// ... get matched result

return matched;

}

//, ... others callbacks

}

});

At.js 仿github表情符号自动完成js插件的github地址为：https://github.com/ichord/At.js