At.js 实现监听输入框关键字 实现自动完成 仿微博@功能插件

Question

At.js 可以监听输入框实时输入的字符，当检测到特定的字符时，会弹出一个列表候选框，实现应用程序的输入提示和自动完成。

兼容性

• textarea - Chrome, Safari, Firefox, IE7+ (maybe IE6)
• contentEditable - Chrome, Safari, Firefox, IE9+

插件特点

• Support IE 7+ for textarea.
• Supports HTML5 contentEditable elements (NOT including IE 8)
• Can listen to any character and not just '@'. Can set up multiple listeners for different characters with different behavior and data
• Listener events can be bound to multiple inputors.
• Format returned data using templates
• Keyboard controls in addition to mouse
  • Tab or Enter keys select the value
  • Up and Down navigate between values (and Ctrl-P and Ctrl-N also)
  • Right and left will re-search the keyword.
• Custom data handlers and template renderers using a group of configurable callbacks
• Supports AMD

• 可以监听任何字符，不仅仅只是@，可以设置监听不同的字符和使用不同的数据。
• 支持同时使用静态数据和动态数据（通过 AJAX），静态数据会被优先使用，然后再用 AJAX 加载找不到的值。
• 可以给多个文本框设置监听事件。
• 内置缓存支持。
• 可以使用模板设置数据的显示格式。
• 鼠标/键盘控制：Tab 或 Enter 键选择，Up 和 Down 键上下导航。
• 支持输入搜索。

依赖关系

• jQuery >= 1.7.0.
• Caret.js (You can use Component or Bower to install it.)

使用方法

Simply include the following files in your HTML and you are good to go.

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

$('#inputor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

默认的参数

$.fn.atwho["default"] = {
  at: void 0,
  alias: void 0,
  data: null,
  displayTpl: "<li>${name}</li>",//显示模板
  insertTpl: "${atwho-at}${name}",//插入模板
  headerTpl: null,
  callbacks: DEFAULT_CALLBACKS,
  searchKey: "name",
  suffix: void 0,
  hideWithoutSuffix: false,
  startWithSpace: true,//是否已空格开始
  highlightFirst: true,
  limit: 5,//默认只显示5条
  maxLen: 20,
  minLen: 0,
  displayTimeout: 300,
  delay: null,
  spaceSelectsMatch: false,
  tabSelectsMatch: true,
  editableAtwhoQueryAttrs: {},
  scrollDuration: 150,
  suspendOnComposing: true,
  lookUpOnClick: true
};

Bower & 组件

For installing using Bower you can use jquery.atwho and for Component please use ichord/At.js.

Rails

You can include At.js in your Rails application using the gem jquery-atwho-rails.

• github 地址：https://github.com/ichord/At.js
• 在线实例：http://ichord.github.io/At.js/
• 帮助文档：https://github.com/ichord/At.js/wiki
• 帮助文档本站镜像：https://www.wenjiangs.com/docs/at-js