JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.frinki.com/Resources/JScript/jquery-ui.min.test.js"></script>
<link rel="stylesheet" href="http://dev.frinki.com/Resources/Style/JQuery-UI/jquery-ui-1.8.16.custom.css">
<div contenteditable="true" id="Test"></div>

CSS

#Test
{
    border-style:solid;
    border-width:1px;
    height:100px;
}

JavaScript

$(document).ready(function() {

    var availableTagsFollowing = [{
        "value": "64",
        "label": "Leo Bednarz",
        "id": "<img style='vertical-align:middle;' src='http://dev.frinki.com/picture/crop/64'/>"},
    {
        "value": "69",
        "label": "Francisco Novick",
        "id": "<img style='vertical-align:middle;' src='http://dev.frinki.com/picture/crop/69'/>"},
    {
        "value": "61",
        "label": "Augusto Voena",
        "id": "<img style='vertical-align:middle;' src='http://dev.frinki.com/picture/crop/61'/>"}];

    function split(val) {
        return val.split(/@\s*/);
    }
    
    function extractLast(term) {
        return split(term).pop();
    }
    
    $('#Test').autocomplete({
        minLength: 1,
        source: function(request, response) {
            var term = request.term,
                results = [];
            console.log(term);
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(availableTagsFollowing, term);
                } else {
                    //results = ['Start typing...'];
                }
            }
            response(results);
        },
        focus: function(e) {
            // prevent value inserted on focus
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.innerHTML);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.label);
            terms.push("");
            this.innerHTML = terms.join("");

            return false;
        }

    }).data("autocomplete")._renderItem = function(ul, item) {
        $("<li style='font-size:1.0em;'></li>").data("item.autocomplete", item).append("<a>" + item.id + item.label + "</a>").appendTo(ul);
        return;
    };

});