个性化阅读
专注于IT技术分析

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

本文概述

自动完成插件往往总是可自定义的, 因此你可以始终实现自己的功能。如果你想输入任何内容, 并在用户键入特殊字符时添加自动完成功能, 那么使用现有插件实施起来就不那么容易了, 因为大多数插件都不提供这种功能。如果你查找的不是自动完成功能, 而该功能会为你键入的每个字符显示下拉列表, 但针对特定内容, 则可能正在寻找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="css/jquery.atwho.css" rel="stylesheet">

<!-- Include jQuery from a CDN or a local copy -->
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Use Caret.js -->
<script src="js/jquery.caret.js"></script>

<!-- Include atwho.js -->
<script src="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.使用自动完成

自动完成功能的用法非常简单, 可以通过示例轻松理解:

基本用户自动完成

最常用的示例是用户提及自动完成功能, 当用户键入@时会触发自动完成功能, 然后显示自动完成功能, 用户可以从列表中选择该用户, 也可以只键入其名称直到被过滤, 然后按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 Structure
    var 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>

现场例子

玩以下小提琴, 该小提琴实现了有用的自动完成功能, 可以编写表情符号, 提及某些用户或完成城市:

编码愉快!

赞(0)
未经允许不得转载:srcmini » 如何使用jQuery和AtWho创建@mentions自动完成功能
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!