Jira喜欢textarea的自动完成功能(Jira like autocomplete for textarea)

 我想为我的一个宠物项目实现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插入该用户名？ 
 

I want to implement Jira like auto complete behavior for one of my pet project. Check following screenshot.
 
 
I have searched hard for any existing plugin that could able to deliver it but couldn't find anyone.
 
I have tried following things (JsFiddle Link):
 
 
 
Add textarea and input(hidden initially) field elements. 
 
 
Bind a keyPress event on textarea
 
 
Capture @ key and showing input field enabled with jQuery#autocomplete plugin with list of users 
 
 
HTML:
 
<div class='span12'>
    <textarea id='comments' class='span12'></textarea>
    <input id='users' class='span12 hide' />
</div>
 
Script:
 
$(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
        });
      }
    });
});
 
My questions are:
 
 
 
How can we trigger @text to show auto-complete list with text as selected?
 
 
After selecting the user, how we can insert that user name in the textarea?
 

原文：https://stackoverflow.com/questions/25401387