Implement Twitter/Weibo @ mentions
###Demo http://ichord.github.com/At.js
###Feature
- can listen any char you want. every listening can have same settings but different value. so they can have different behaviors such as showing different data by setting different template.
- support static data and dynamic data(ajax) at the same time it will search the static data first. If not exist, searching by callabck then.
- can bind multiple textarea
- cacheable
- decide which data should be showing yourself(data template)
- press
TAB
orENTER
to insert. - press
UP
andDOWN
to select.
###usage
default = {
/*
It's must be a function.
`At` will pass two arguments to this callback, they are `query` and `callback`:
`query` is the key word that fetch from the textarea
with the char you have regsitered such as "@"
`callback` will accept a string array or plain object array
one more thing, those name is optional.
*/
'callback': null,
/*
enable search cache. if you want to use $.ajax cache.
just set it false.
*/
'cache' : true,
/*
static data will be searched by this plugin
*/
'data':[],
/*
how much item will be showed in box
*/
'limit' : 5,
/*
item template
this plugin will insert the value of `data-value` into textarea and search by it.
*/
'tpl' : "<li id='${index}' data-value='${name}'>${name}</li>"
};
####static data
what you need to do is just register the character such as @
or :
like this example,
and then pass the data.
emoji_list = [
"apple", "aquarius", "aries", "arrow_backward", "arrow_down",
"arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
"arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right"];
$('textarea').atWho(":",{data:emoji_list});
####ajax
$('textarea').atWho("@",function(query,callback){
var url = "#",
param = {'q':query},
names = [];
$.ajax(url,param,function(data) {
names = $.parseJSON(data);
// `names` must be a array contain string or plain object
callback(names);
});
});
####both
names = ['one','two'];
$('textarea').atWho("@",{
'data': names,
'callback': function(query,callback) { console.log(query,callback);}
});
####customs template
code in example.html file
base template, li
element and data-value
property is necessary :
<li data-value='${search_word}'>anything here</li>
$("textarea")
.atWho("@",{
'tpl': "<li id='${id}' data-value='${name}'>${name} <small>${email}</small></li>"
,'data':data
})
.atWho(":",{
tpl:"<li data-value='${key}'>${name} <img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${name}.png' height='20' width='20' /></li>"
,callback:function(query,callback) {
$.ajax({
url:'data.json'
data:{q:query}
,type:'GET'
,success:function(data) {
datas = $.map(data,function(value,i){
return {'id':i,'key':value+":",'name':value}
})
callback(datas)
}
})
}
})