At.js

Released 6 years ago , Last update 6 years ago

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

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

Pricing

14 day 14-day money-back guarantee

FREE

MIT license

The MIT license is an open-source license.

License » MIT license Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
No comments have been posted yet.