JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" contenteditable="true" style="border:1px solid black;width:300px;height:200px"></div>

<script>
    $("div").autocomplete({
        source: function (request, response){
            response(['test1', 'test2']);
        },
        focus: function () {
            return false;
        },
        select: function(event, ui){
            el = $("div#main");
            old_content = el.html();
            extra_content = ui.item.value;
            el.html(old_content + extra_content);
            el.autocomplete("destroy");
            return false;
        }
    });
    
</script>