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:' + (getCaretPos(e.target) * 8) + 'px;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).remove();
                $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();
            }
        })
    }
});

function getCaretPos(oField) {

    //...