At.js

Add Twitter / Weibo style @ mentions autocomplete to your application.

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 or Enter keys select the value, Up and Down navigate between values

Requirements

• jQuery >= 1.7.0.

Usage

Settings

default = {
            /*
             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
             */
            'choose' : "data-value"
};

Using static data

Bind a textarea to listen to a specific character and pass an array of data in the data parameter:

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});

Using dynamic data with AJAX

This time we pass a callback function instead of the static data as the second parameter.

$('textarea').atWho("@",function(query,callback) {
    var url = "#",
    param = {'q':query},
    names = [];
    $.ajax(url,param,function(data) {
        names = $.parseJSON(data);
        <div></div>
        callback(names);
    });
});

Using both static data and dynamic data

We pass a configuration object containing both the data and callback parameters.

var names = ['one','two'];
$('textarea').atWho("@",{
    'data': names,
    'callback': function(query,callback) { 
        console.log(query,callback);
    }
});

Custom templates

The following code is taken from the example.html file

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>

$("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)
            }
        })
    }
})