Jira 喜欢 textarea 的自动完成功能答案

【问题标题】：Jira like autocomplete for textareaJira 喜欢 textarea 的自动完成功能
【发布时间】：2014-10-13 14:44:42
【问题描述】：

我想为我的一个宠物项目实现 Jira 之类的自动完成行为。检查以下屏幕截图。

我一直在努力寻找任何能够提供它的现有插件，但找不到任何人。

我尝试过以下事情 (JsFiddle Link)：

添加textarea 和input（最初隐藏）字段元素。
在textarea 上绑定keyPress 事件
捕获 @ 键并显示使用 jQuery#autocomplete 插件启用的 input 字段和用户列表

HTML：

<div class='span12'>
    <textarea id='comments' class='span12'></textarea>
    <input id='users' class='span12 hide' />
</div>

脚本：

$(function() {
    var users = [
        "Ram",
        "Ramesh",
        "Rakesh",
        "Rahul",
        "Abhi",
        "Karan"
    ];
    $('#comments').on('keypress', function(e){
      if(e.keyCode === 64) {
        $( "#users" ).removeClass('hide');
        $( "#users" ).autocomplete({
          source: users
        });
      }
    });
});

我的问题是：

我们如何触发@text 以显示自动完成列表并选择text？
选择用户后，如何在textarea中插入该用户名？

【问题讨论】：

标签： javascript jquery html user-interface autocomplete

【解决方案1】：

以下是我发现的三个 JavaScript 插件，它们可以满足我的需求：

【讨论】：

【解决方案2】：

jquery.mentionsInput 是一个具有类似 UI 的出色实现。

它适用于自动建议的对象数组以及通过 AJAX 请求获取的内容。它需要 jQuery 和 underscore.js，并支持 MSIE 8 及更高版本。

需要特别注意的是，它使用简单的 Markdown 样式标记导出指向用户名的链接，将内部 ID 与 @username 提及一起存储。这意味着您可以轻松解析文本以执行诸如根据提及的谁触发事件之类的操作，并且意味着您可以在文本中显示真实的、人类可读的名称，但仍将它们与内部唯一的用户 ID 相关联。

如果您只需要将结果存储或显示为纯文本，任何 Markdown 库都可以将其转换为纯文本。

【讨论】：