Jira喜欢textarea的自动完成功能

Question

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

我已经搜索过能够提供但却找不到任何人的任何现有插件。

我尝试了以下内容（JsFiddle Link）：

• 添加textarea和input（最初隐藏）字段元素。
• 在keyPress
上绑定textarea个活动
• 捕获@密钥并显示input字段已启用jQuery#autocomplete插件及用户列表

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？
中插入该用户名

Answer 1

以下是我找到的三个JavaScript插件，它们用于我正在寻找的目的：

• jQuery-textcomplete.js
• At.js
• triggeredAutocomplete.js

Answer 2

像这样的用户界面的一个很好的实现是jquery.mentionsInput。

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

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

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