Positioning text input on top of cursor position textarea (javascript, AutoFill Textarea)

I would like to do autocomplete if, if you type "@", they will be offered a list of autocomplete names.

I use jQueryUI autocomplete and the only problem with my solution ( http://jsfiddle.net/aUfrz/22/ ) is that autocomplete-state needs text input to be placed over the textarea cursor position, and not to the right, because at the moment it is worth it.

Here is my JS, which is in JSFiddle:

$(document.body).on('keypress', 'textarea', function(e) {
   var names = [
        "johnny",
        "susie",
        "bobby",
        "seth"
    ],
    $this=$(this),
    char = String.fromCharCode(e.which);

    if(char == '@') {
       console.log('@ sign pressed');
       var input=$('<input style="position:relative; top:0px; left:0px;background:none;border:1px solid red" id="atSign" >');
       $this.parent().append(input);
       input.focus();
       input.autocomplete({
        source: names,
        select: function (event, ui) {
            console.log('value selected'+ui.item.value);
            //$this.val('@'+ui.item.value);
            $this.insertAtCaret(ui.item.value);
            $this.focus();
            input.remove();
        } //select
    });  //autocomplete
  } //if 
}); // keypress

HTML:

<textarea></textarea>​

, JQuery , : insertAtCaret(), SO.