Add Twitter / Weibo style @ mentions autocomplete to your application.
Let me know you are using it. So I will work harder on it, Thanks.:)
add your websit on THIS LIST or just tell me if you are using At.js
###Demo http://ichord.github.com/At.js
###Features
- Can listen to any character
not just '@', and set up multiple listeners for different characters with different behavior and data. - Supports static data and dynamic data(via AJAX) at the same time
static data will be searched first, and then use AJAX to fetch non-existing values. - Listener events can be bound to multiple textareas
- Cacheable
- Format returned data using templates
- Keyboard controls in addition to mouse
Tab
orEnter
keys select the value,Up
andDown
navigate between values
- jQuery >= 1.7.0.
Here is the Default setting.
/*
Callback function to dynamically retrieve data based on query.
`At` will pass two arguments to the callback: `query` and `callback`.
`query` is the keyword that is being autocompleted after the character listener ('@' is the default)
`callback` should be run on the data. It accepts a string array or plain object array
*/
'callback': null,
/*
Enable search cache. Set to false if you want to use $.ajax cache.
*/
'cache': true,
/*
Static data to use before the callback is invoked
*/
'data': [],
/*
How many items to show at a time in the results
*/
'limit': 5,
/*
Item format template
`data-value` contents will be inserted to the textarea on selection
*/
'tpl': "<li id='${index}' data-value='${name}'>${name}</li>",
/*
The name of the data attribute in the item template
You can change it into any name defined in attributes of `li` element which is template
*/
'choose': "data-value"
Bind a textarea to listen to a specific character and pass an array of data in the data
parameter
The first argument is the character you want to listen, and the second one is a map of options:
var 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});
This time we pass a callback function instead of the static data as the second parameter.
You can just set a function as second argument, At.js will determine it and set it to callback option.
the data - names
- would be a string array or a map array which the same as data
option
query
argument is the string behind the character you are listening as "@" in this example.
$('textarea').atWho("@", function(query, callback) {
var url = "data.json",
param = {'q':query};
$.ajax(url, param, function(data) {
names = $.parseJSON(data);
callback(names);
});
});
We pass a configuration object containing both the data
and callback
parameters.
It will search the local static data first.
var names = ['one', 'two'];
$('textarea').atWho("@", {
'data': names,
'callback': function(query, callback) {
console.log(query, callback);
}
});
base template, li
element and data-value
attribute are all necessary.
We also show how to set up multiple listeners with different characters.
<li data-value='${word}'>anything here</li>
we use these static data in all examples below:
emojis = $.map(emojis, function(value, i) {
return {'id':i, 'key':value+":", 'name':value};
});
data = $.map(data, function(value, i) {
return {'id':i, 'name':value, 'email':value+"@email.com"};
});
At.js will search by data-value
and the contents will be inserted to the textarea on selection
$("textarea").atWho("@",{
'tpl': "<li id='${id}' data-value='${name}'>${name} <small>${email}</small></li>",
'data': data
});
$("textarea").atWho(":",{
tpl: "<li data-value='${key}'>${name} <img src='http://xxx/emoji/${name}.png' height='20' width='20' /></li>",
data: emojis
});
$('textarea').atWho("@",{
tpl: "<li id='${id}' data-value='${name}'>${name} <small>${email}</small></li>",
callback: function(query, callback) {
var url = "data.json",
param = {'q':query};
$.ajax(url, param, function(data) {
names = $.parseJSON(data);
callback(names);
});
}
});
Alternatively, you can specific which value would be inserted by setting choose
option.
$("textarea").atWho("@", {
'tpl': "<li id='${id}' data-value='${name}' data-insert='${email}'>${name} <small>${email}</small></li>",
'data': data,
'choose': "data-insert"
});
If you want to update data to all binded inputor or specified one. You can do that like this:
// for all binded textarea
$('textarea').atWho("@", {data:new_data})
// for specified one
$('textarea#at_mention').atWho("@", {data:new_data})
It won't change others setting which has been setted earlier. Actually, It just update the setting. You can use it to change others settings like that.