JSFiddle - React, Tailwind, and code Playground

by mjerez

HTML

<script src="https://raw.github.com/beviz/jquery-caret-position-getter/master/jquery.caretposition.js"></script>
<body>
<p>Click ctrl+space while you write to diplay the pannel</p>
</br>
    <textarea id="editArea" rows="4" cols="50"></textarea>
</br>
</br>
</br>
<div id="autocomplete" class="aux hidden ">
    <ol>
        <li>Option a</li>
        <li>Option b</li>
        <li>Option c</li>
        <li>Option d</li>
    </ol>
</div>
</body>

CSS

body{position:relative;font:normal 100% Verdana, Geneva, sans-serif;
padding:10px;}
.aux{background:#ccc;opacity: 0.5;width:50%;
    padding:5px;border:solid 1px #aaa;}
.hidden{display:none}
.show{display:block; position:absolute; top:0px; left:0px;}
textarea {
    width: 300px;
    height: 100px;
    font-size: 25px;
    font-family: Helvetica, Arial, Verdana;
}

body {
  padding: 50px 100px
}

JavaScript

$(document).keypress(function(e) {
    if ($(e.target).is('input, textarea')) {
        var key = String.fromCharCode(e.which);
        var ctrl = e.ctrlKey;
        if (ctrl) {
            var display = $("#autocomplete");
            var editArea = $('#editArea');            
            var pos = editArea.getCaretPosition();
            var offset = editArea.offset();
            // now you can use left, top(they are relative position)
            display.css({
                left: offset.left + pos.left,
                top:  offset.top + pos.top,
                color : "#449"
            })
            display.toggleClass("show");
            return false;
        }
    }

});
window.onload = (function() {
    $("#editArea").blur(function() {
        if ($("#autocomplete").hasClass("show")) $("#autocomplete").toggleClass("show");
    })
});