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

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

发布于 2019-05-19 字数 5385 浏览 2710 评论 0

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

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.

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论