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