JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="result" contenteditable="true"></div>
    <ul class="autoComplete">
        <li>hello</li>
    </ul>
</div>

CSS

div {
    position:relative;
}
.autoComplete {
    padding:0;
    margin: 0;
    list-style: none;
    z-index:999;
    display:none;
    width: 200px;
    overflow: auto;
    height:200px;
    position: absolute;
    left: 0;
    top: 1.5em;
}
.autoComplete li {
    background-color:#E1E1E1;
    cursor: hand;
    cursor: pointer;
}
.autoComplete li.hover {
    background-color:red;
}
#result {
    padding:0;
    margin:0;
    overflow: auto;
    width:300px;
    height: 200px;
    border: 1px groove black;
}

JavaScript

var result = $('#result');
result.keydown(function (event) {
    var keyCode = event.which;
    if (keyCode == 32) {
        alert(getCaretPosition(this));
        console.log(getCaretPosition(this));
    } else if (keyCode == 13) {
        event.preventDefault();
        placeCaretAtEnd(result.get(0));
    }
});


function getCaretPosition(editableDiv) {
    var caretPos = 0,
        containerEl = null,
        sel, range;
    if (window.getSelection) {



        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }

        /*setTimeout(function(){
					sel = window.getSelection(); //user selection will be a Selection-Object
					if (sel.rangeCount) {
						range = sel.getRangeAt(0);
						if (range.commonAncestorContainer.parentNode == editableDiv) {
							caretPos = range.endOffset;
						}
					}
				},100)*/






    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}


//Function to place caret at the end of the text in contenteditable div
//Link : http://stackoverflow.com/q/4233265/1577396
function placeCaretAtEnd(el) {
    //debugger;
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel =...