Github Style InLined Autocomplete with jQuery - At.js

At.js is a jQuery plugin for Github style inlined autocomplete that pops up an autocomplete box at the position of the caret whenever you type a custom character in a textarea. Check the example page in the zip for more information.

Features:

• Supports ContentEditable mode.
• Supports keyboard controls.
• Can listen to any character not only '@'
• Ajax enabled with JSON data.
• AMD supported.

Basic Usage:

1. Include jquery.atwho.css in the head section of your page.

<link rel="stylesheet" type="text/css" href="jquery.atwho.css"/>

2. Create a textarea in your page.

<textarea id="demo" class="demo"></textarea>

3. Include the jQuery javascript library and jquery.atwho.js script on your web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.atwho.js"></script>

4. The javascript to activate the plugin.

var emojis = [
    "smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
    "a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
    "arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
    "arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
    "art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
    "balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
    "bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
    "bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
    "boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
    "boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
    "person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
    "point_down", "point_left", "point_right", "point_up", "point_up_2",
    "police_car", "poop", "post_office", "postbox", "pray", "princess",
    "punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
    "up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
    "warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
    "white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
    "womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
    "-1"
]
var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","浣犲ソ","浣犱綘浣�"];

var names = $.map(names,function(value,i) {
    return {'id':i,'name':value,'email':value+"@email.com"};
});
var emojis = $.map(emojis, function(value, i) {return {key: value, name:value}});

$(function(){
    $inputor = $('#demo').atwho({
        at: "@",
        // data: names,
        data: "assets/data.json",
        tpl: "<li data-value='@${name}'>${name} <small>${email}</small></li>",
        callbacks: {
            before_save: function(data) {
                return this.call_default("before_save", data.names);
            }
        }
    }).atwho({
        at: "#",
        data: names,
        tpl: "<li data-value='#${name}'> issues${id} from ${name}</li>"
    }).atwho({
        at: ":",
        data: emojis,
        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>"
    });
    $inputor.caret('pos', 47);
    $inputor.focus().atwho('run');

});

5. Include the jQuery javascript library and jquery.atwho.js script on your web page.

{

  // trigger characters
  // '@', '#', etc
  at: void 0,

  // alias name of 'at'
  alias: void 0,

  // an array of a URL (JSON)
  data: null,

  // templates
  displayTpl: "<li>${name}</li>",
  insertTpl: "${atwho-at}${name}",
  headerTpl: null,

  // callback. see below
  callbacks: null,

  functionOverrides: {},

  // search key
  searchKey: "name",

  // suffix character
  suffix: void 0,

  // hide without suffix
  hideWithoutSuffix: false,

  // start with space
  startWithSpace: true,

  // accept space bar
  acceptSpaceBar: false,

  // hightlight the first item
  highlightFirst: true,

  // maximum number of items
  limit: 5,

  // max/min length
  maxLen: 20,
  minLen: 0,

  // timeout in milliseconds
  displayTimeout: 300,

  // delay in milliseconds
  delay: null,

  // select matched items with space and/or tab
  spaceSelectsMatch: false,
  tabSelectsMatch: true,

  // add attribute to the inserted element for contenteditable mode
  editableAtwhoQueryAttrs: {},

  // scroll duration in milliseconds
  scrollDuration: 150,

  // suspend on composing
  suspendOnComposing: true,

  // loop up on click
  lookUpOnClick: true
  
}

6. Callback functions.

// before you save the data
beforeSave: (data) ->

// called to match the `flag`.
// flag: current `flag` ("@", etc)
// return [String | null] Matched result.
matcher: (flag, subtext, should_startWithSpace, acceptSpaceBar) ->

// filter data by matched string.
// query: Matched string.
// data: data list
// searchKey : at char for searching.
filter: (query, data, searchKey) ->

// remote filter
// params: matched query
// callback: callback to render page.
remoteFilter: (query, callback) ->

// sorter data of course.
// query: Matched string.
// items: data that was refactored
// searchKey: at char to search
sorter: (query, items, searchKey) ->

// Eval template for every single item in display list.
// tpl: The template string.
// map: Data map to eval.
tplEval: (tpl, map) ->

// Highlight the `matched query` string.
// li: HTML String after eval.
// query: matched query.
highlighter: (li, query) ->

// What to do before inserting item's value into inputor.
// value: content to insert
// $li: the chosen item
beforeInsert: (value, $li) ->

// You can adjust the menu's offset here.
// offset: offset will be applied to menu
beforeReposition: (offset) ->

// After the `matcher` was failed, which it can't get any query string.
afterMatchFailed: (at, el) ->

Change log:

v1.5.4 (2018-05-30)

• Updates

v1.1.0 (2015-04-02)

• lisafeather/displyTplCallBack
• ADD: editableAtwhoQueryAttrs options
• Added setting for 'spaceSelectsMatch' (default false/off)

---

This awesome jQuery plugin is developed by ichord. For more Advanced Usages, please check the demo page or visit the official website.