JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<textarea >
</textarea>

JavaScript

$(document).on('keypress', 'textarea', function(e) {

    var names = [
            "johnny",
            "susie",
            "bobby",
            "seth"
        ];
        var $this=$(this); 
   var char = String.fromCharCode(e.which);
   if(char == '@') {
    console.log('@ sign pressed');
    var input=$('<input style="position:fixed; top:'+ e.pageY +'px; left:'+ (e.target.value.length*13)+'px;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();
            }

        }); 
   }
});

$.fn.extend({
    insertAtCaret: function(myValue){
      return this.each(function(i) {
        if (document.selection) {
          //For browsers like Internet Explorer
          this.focus();
          sel = document.selection.createRange();
          sel.text = myValue;
          this.focus();
        }
        else if (this.selectionStart || this.selectionStart == '0') {
          //For browsers like Firefox and Webkit based
          var startPos = this.selectionStart;
          var endPos = this.selectionEnd;
          var scrollTop = this.scrollTop;
          this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
          this.focus();
          this.selectionStart = startPos + myValue.length;
          this.selectionEnd = startPos + myValue.length;
          this.scrollTop = scrollTop;
        } else {
          this.value += myValue;
          this.focus();
        }
      })
    }
});