简要教程

At.js是一款仿github表情符号和at自动完成jquery插件。通过At.js插件，可以在表单，后某个可编辑的div元素，或某些所见即所得的文本编辑器中，通过快捷方式来自动补全表情符号，或at某人的操作。At.js插件的特点还有：

o 支持IE7+的textarea元素。

o 支持HTML5 contentEditable元素（不包括IE8）.

o 可以监听任何字符，不单单只是@字符。

o 使用模板来返回格式化数据。

o 支持键盘控制。

o 支持AMD。

 使用方法

该插件依赖于jquery.caret.js。在使用是要引入jquery，jquery.caret.js，jquery.atwho.css和jquery.atwho.js文件。

<link href="css/jquery.atwho.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/jquery.caret.js"></script>
<script src="js/jquery.atwho.js"></script>

 初始化插件

At.js插件最基本的用法如下：

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

 配置参数

At.js插件的可用配置参数如下：

$('.atwho-inputor').atwho({
    // key char for observing such as `@`
    at: void 0,
    /*
        alias name of `at`
        it would be an 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,
    /*
         Would render the passed value at the top of the selector popup.
    */
    headerTpl: "<h3>Select a user</h3>",
    /*
         would eval it and assign value of the key contained in `${}`
         key-value ( {'name': "one"} ) is an item in `data` Array.
         Alternatively, this can be a function accepting one data item as a parameter.
    */
    displayTpl: "<li>${name}</li>",
    /*
         It will be evaluated and inserted in the inputor.
         `atwho-at` is the `at` for runtime by default.
         You change it into anything you want.
    */
    insertTpl: "${atwho-at}${name}",
    /*
        There are several data processors that can be overriden 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.
    */
    searchKey: "name",
    /*
        limit number of items to show in popup list.
    */
    limit: 5,
    /*
        setting the max length of the string after `at` that would be matched
        It will stop matching if the query string is longer than `max_len`.
    */
    maxLen: 20,
    /*
        if `yes`, At.js will match the query with a spaaace before the `at`.
    */
    startWithSpace: true,
    // time in ms to persist the popup menu for after blurring from the invoking text field
    displayTimeout: 300,
    // highlight_first suggestion in popup menu
    highlightFirst: true,
    // delay time trigger At.js while typing. For example: delay: 400
    delay: null,
    // suffix for inserting string.
    suffix: undefined,
    // don't show dropdown view without `suffix`
    hideWithoutSuffix: false,
    // Add attribute to the inserted element for contenteditable mode
    // check out the issue: https://github.com/ichord/At.js/issues/253#issuecomment-75694945
    editableAtwhoQueryAttrs: {}
});

 应用示例

 自定义模板

你可以自定义要在自动完成列表中显示的内容，如显示一个头像，或一个表情符号。

一个有效的模板必须是一个<li>元素，例如：

<li>这里可以放任何东西</li>                 

你可以在<li>元素中放任何HTML代码，如一张图片。

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

 注册多个at关键字

At.js可以监听多个at关键字，并且每个关键字都有自己的配置。

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 emojisList = $.map(emojis, function(value, i) {
  return {'id':i, 'name':value};
});
 
var issues = [
  { name: "1", content: "stay foolish"},
  { name: "2", content: "stay hungry"},
  { name: "3", content: "stay heathly"},
  { name: "4", content: "this happiess"},
];
 
$(".container textarea")
  .atwho({
    at: "@",
    data: names
  })
  .atwho({
    at: "#",
    displayTpl: '<li>${name} <small>${content}</small></li>',
    data: issues
  })
  .atwho({
    at: ":",
    displayTpl: "<li><img src='icons/emoji/${name}.png' height='20' width='20'/> ${name} </li>",
    insertTpl: ':${name}:',
    data: emojisList
  });

 远程加载更多数据

当你从某个URL获取数据时，At.js将执行AJAX请求异步加载更多json数据。

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

 定义查询条件

如果你想支持unicode编码，你可以自定义查询条件。

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！