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(saveSelection(this).start);
        console.log(saveSelection(this).start);
    } else if (keyCode == 13) {
        event.preventDefault();
        placeCaretAtEnd(result.get(0));
    }
});


var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                }
                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel =...