Base Document

Base usage

$('.atwho-inputor').atwho({
  at: "@",
  data: ["one", "two", "three"],
}).atwho({
  at: ":",
  data: ["+1", "-1", "smile"]
});

Settings

Here are default settings:

$('.atwho-inputor').atwho({
    // key char for observing such as `@`
    at: void 0,
    /*
        alias name of `at`
        it would be a 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,
    /*
         DEFAULT_TPL = "<li data-value='${name}'>${name}</li>";
         would eval it and assign value of the key contained by `${}`
         key-value ( {'name': "one"} ) is an item in `data` Array.
    */
    tpl: DEFAULT_TPL,
    /*
        There are serval data processers can be override in 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.
    */
    search_key: "name",
    /*
        limit items to show in popup list.
    */
    limit: 5,
    /*
        setting the max length of the string after `at` would be matched
        It will stop matching if the query string is lonager than `max_len`.
    */
    max_len: 20,
    /*
        display `at` or not.
        if it is set to false. `at` would not be inserted into inputor.
    */
    display_flag: true,
    display_timeout: 300
});

Examples

Custom Template

You can customize what will show in popup's item , such as user’s avatar.

A valid template should meet the following requirements:

• It’s a li HTML element
• It has the data-value attribute, whose value will be inserted into the inputor if the item is selected.

<li data-value='${word}'>anything here</li>

You put any HTML element into the template such as img. It just a HTML element.

var emojis = ["smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee"];
var emojis_list = $.map(emojis, function(value, i) {
  return {'id':i, 'key':value+":", 'name':value};
});
//http://a248.e.akamai.net/assets.github.com/images/icons/emoji/8.png
$(".container textarea").atwho({
  at: ':',
  tpl: "<li data-value='${key}'><img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${name}.png' height='20' width='20'/> ${name} </li>",
  data: emojis_list
});

Register multiple at key

At.js can listen to multiple at , every Keyword has its own settings.

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 emojis_list = $.map(emojis, function(value, i) {
  return {'id':i, 'key':value+":", 'name':value};
});

var issues = [
  { name: "1", content: "stay foolish"},
  { name: "2", content: "stay hungry"},
  { name: "3", content: "stay heathly"},
  { name: "4", content: "this happiess"},
];

//http://a248.e.akamai.net/assets.github.com/images/icons/emoji/8.png
$(".container textarea")
  .atwho({
    at: "@",
    data: names
  })
  .atwho({
    at: "#", 
    tpl: '<li data-value="${name}">${name} <small>${content}</small></li>',
    data: issues
  })
  .atwho({
    at: ":", 
    tpl: "<li data-value='${key}'><img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${name}.png' height='20' width='20'/> ${name} </li>",
    data: emojis_list
  });

Load remote data

When you set data as URL string, At.js will launch Ajax request to the server to get the JSON data

   $('textarea').atwho({
        at: "@", 
        data: "http://www.atjs.com/users.json",
        limit: 7
    });

Custom Query matcher

If you want to support unicode characters, you can customize the Query matcher.

The matcher callback look like this:
BTW: You should check Callbacks settings for more details

$('#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
        }
    });

You can read issues 30 for more details.