基本使用

优质

小牛编辑

118浏览

2023-12-01

Basic usage

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

Settings

Here are the default settings:

$('.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: {}
});

Examples

Custom Template

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

A valid template should meet the following requirements:

It should be a li HTML element.

<li>anything here</li>

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

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
});

Register multiple `at` keys

At.js can listen to multiple at and every Keyword can have 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 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"},
];

//http://a248.e.akamai.net/assets.github.com/images/icons/emoji/8.png
$(".container textarea")
  .atwho({
  at: "@",
  data: names
  })
  .atwho({
  at: "#", 
  displayTpl: '<li>${name} <small>${content}</small></li>',
  data: issues
  })
  .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
  });

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}+)
You can read issue #30 for more details.
当搜索条件同时包含中文和英文字符时，无法正确搜索到，filter获取到的query也不正确
, 'gi');
        match = regexp.exec(subtext);
        // ... get matched result
        return matched;
      }
      //, ... others callbacks
    }
  });

You can read issue #30 for more details.

当搜索条件同时包含中文和英文字符时，无法正确搜索到，filter获取到的query也不正确