如何使用jQuery和AtWho创建@mentions自动完成功能 _JavaScript开发

本文概述

1.包含AtWho.js
2.使用自动完成
现场例子

自动完成插件往往总是可自定义的, 因此你可以始终实现自己的功能。如果你想输入任何内容, 并在用户键入特殊字符时添加自动完成功能, 那么使用现有插件实施起来就不那么容易了, 因为大多数插件都不提供这种功能。如果你查找的不是自动完成功能, 而该功能会为你键入的每个字符显示下拉列表, 但针对特定内容, 则可能正在寻找AtWho.js之类的插件！
1.包含AtWho.js每个开发人员都知道Github及其有用的问题系统, 好吧, atwho.js是一个自动完成库, 可以自动完成提及, 笑脸等内容, 就像你在Github网站上任何文本区域中所做的一样。 At.js依赖于Caret.js库, 该库可在库触发的任何事件期间提供对光标位置的准确处理。
话虽如此, 要使用该库, 你至少需要：

jQuery> = 1.7.0。
Caret.js(你可以使用Component或Bower安装它, 或在此处下载缩小的代码的副本)

你需要至少包含3个JS文件和1个CSS文件才能使该插件正常工作, 该基本CSS样式也可以在存储库中找到：

< !-- Add default autocomplete style (github style) --> < link href="http://www.srcmini.com/css/jquery.atwho.css" rel="stylesheet"> < !-- Include jQuery from a CDN or a local copy --> < script src="http://img.readke.com/220524/093T03L8-0.jpg"> < /script> < !-- Use Caret.js --> < script src="http://www.srcmini.com/js/jquery.caret.js"> < /script> < !-- Include atwho.js --> < script src="http://www.srcmini.com/js/jquery.atwho.js"> < /script>

自动完成功能适用于Chrome, Safari, Firefox, IE7 +(可能是IE6)上的textareas元素, 如果你在Chrome, Safari, Firefox, IE9 +中的contentEditable元素中使用它, 则可以使用自动完成功能。有关此库的更多信息, 请不要忘了在此处访问Github的官方存储库。该插件最著名的功能是：

支持IE 7+用于textarea。
支持HTML5 contentEditable元素(不包括IE 8)
可以听任何字符, 而不仅仅是” @” 。可以为具有不同行为和数据的不同角色设置多个侦听器
侦听器事件可以绑定到多个输入器。
使用模板格式化返回的数据
除鼠标外的键盘控件
- Tab或Enter键选择值
- 向上和向下在值之间导航(也可以按Ctrl-P和Ctrl-N)
- 左右将重新搜索关键字。
使用一组可配置的回调的自定义数据处理程序和模板渲染器
支持AMD

2.使用自动完成【如何使用jQuery和AtWho创建@mentions自动完成功能】自动完成功能的用法非常简单, 可以通过示例轻松理解：
基本用户自动完成
最常用的示例是用户提及自动完成功能, 当用户键入@时会触发自动完成功能, 然后显示自动完成功能, 用户可以从列表中选择该用户, 也可以只键入其名称直到被过滤, 然后按Enter, TAB或单击选中的项目：

< textarea id="your-input"> < /textarea> < script> $('#your-input').atwho({at: "@", data:['Hans', 'Peter', 'Tom', 'Anne']}); < /script>

使用contentEditable元素
除了可以使用textarea, 还可以在实现contenteditable属性的div中使用它：

< div id="your-input" contenteditable="true" style="background-color: gray; "> < /div> < script> $('#your-input').atwho({at: "@", data:['Hans', 'Peter', 'Tom', 'Anne']}); < /script>

多个自动完成功能(用户和表情符号)
如果你愿意在单个输入中实现多个自动完成功能, 则可以实现, 只要每个初始化器在属性(例如：和@ :)上使用不同的属性即可。

< textarea id="your-input"> < /textarea> < script> // Create Emojis Structurevar emojis = $.map(["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"], function(value, i) {return {key: value, name:value}; }); var EmojiSettings = {at: ":", data: emojis, displayTpl: "< li> ${name} < img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png'height='20' width='20' /> < /li> ", insertTpl: "< img src='https://assets-cdn.github.com/images/icons/emoji/${name}.png'height='20' width='20' /> ", insertTpl: ':${key}:', delay: 400}; var UserSettings = {at: "@", data:['Hans', 'Peter', 'Tom', 'Anne']}; // Initialize Emojis and User Settings on the same autocomplete field$('#your-input').atwho(EmojiSettings).atwho(UserSettings); < /script>

现场例子玩以下小提琴, 该小提琴实现了有用的自动完成功能, 可以编写表情符号, 提及某些用户或完成城市：
编码愉快！