如何使用js或者jquery实现如下图的自动补全效果

<input id="i" type="text" value="One two three">
 
<script type="text/javascript">
 
    function setInputSelection(input, startPos, endPos) {
        if (typeof input.selectionStart != "undefined") {
            input.selectionStart = startPos;
            input.selectionEnd = endPos;
        } else if (document.selection && document.selection.createRange) {
            // IE branch
            input.focus();
            input.select();
            var range = document.selection.createRange();
            range.collapse(true);
            range.moveEnd("character", endPos);
            range.moveStart("character", startPos);
            range.select();
        }
 
    }
 
    window.onload = function() {
        setInputSelection(document.getElementById("i"), 4, 7);
    };
 
</script>