Using AtJS

Posted 7 years ago - updated 7 years ago atjs

AtJS

github

Simple Example

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

Advanced Example

 var at_config = {
        at: "@",
        displayTpl: "<li>#${title} <small>${author}</small></li>",
        insertTpl: "<a href='${url}'>${title}</a>",
        limit: 10,
        minLen: 5,
        maxLen: 20,
        data: null,
        delay: null,
        editableAtwhoQueryAttrs: {
                "data-fr-verified": true // for froala editor
        },
        searchKey: "title",  // json field
        callbacks: {
                /*
                 It function is given, At.js will invoke it if local filter can not find any data
                @param query [String] matched query
                @param callback [Function] callback to render page.
                 */
                remoteFilter: function(query, callback) {
                        $.getJSON("/ajax/search/stories", {query: query, limit: 10, requester: "comments", story_id: "{{@$story->id}}"}, function(data) {
                                self = $(this);
                                callback(data.suggestions)
                        });
                },
                /*
                 allow for spaces
                 http://jsfiddle.net/e44HL/1/
                 */
                matcher: function(flag, subtext, should_start_with_space) {
                        var match, regexp;

                        console.log("looking for story titles...");
                        flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                        if (should_start_with_space) {
                                flag = '(?:^|\\s)' + flag;
                        }
                        regexp = new RegExp(flag + '([A-Za-z0-9_ \+\-\]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');
                        match = regexp.exec(subtext);
                        if (match) {
                                return match[2] || match[1];
                        } else {
                                return null;
                        }
                }

        }
}

// launch
$(".container textarea").atwho(at_config);