Github Style InLined Autocomplete with jQuery - At.js

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.

{
  at: void 0,
  alias: void 0,
  data: null,
  displayTpl: "<li>${name}</li>",
  insertTpl: "${atwho-at}${name}",
  headerTpl: null,
  callbacks: DEFAULT_CALLBACKS,
  functionOverrides: {},
  searchKey: "name",
  suffix: void 0,
  hideWithoutSuffix: false,
  startWithSpace: true,
  acceptSpaceBar: false,
  highlightFirst: true,
  limit: 5,
  maxLen: 20,
  minLen: 0,
  displayTimeout: 300,
  delay: null,
  spaceSelectsMatch: false,
  tabSelectsMatch: true,
  editableAtwhoQueryAttrs: {},
  scrollDuration: 150,
  suspendOnComposing: true,
  lookUpOnClick: true
}

Change log:

v1.5.4 (2018-05-30)

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.

  • Publication date: 30.05.2018
  • Source