JSFiddle - React, Tailwind, and code Playground

A very basic and hastily thrown together text suggestion script/ide. try typing in something and then typing a period. also has specifics (type "Math.")

HTML

<textarea id="text"></textarea><div id="pop"></div>

CSS

html, body, #text {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}
#pop {
    background-color: white;
    font: monotype;
    width: 250px;
    border: solid 1px grey;
    left: -9999px;
    position: absolute;
}
#pop .high {
    color: white;
    background-color: blue;
}

JavaScript

var list = {
    types: {
        String:{},
        Array:{},
        Boolean:{},
        Number:{},
        Object:{},
        Function:{},
        RegExp:{},
        Date:{}
    },
    special: {
        Math: {
            sqrt:{}
        }
    }
};


function sort(ob) {
    var key=[];
    var nob={};
    for(k in ob) {
        key.push(k);
    }
    key.sort(function(a,b){return (a>b)-(a<b);});
    for(var i=0;i<key.length;i++) {
        nob[key[i]]=ob[key[i]];
    }
    
    return nob;
}
function setCaretPosition(ctrl, pos){
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}
function getInputSelection(el) {
    var start = 0,
        end = 0,
        normalizedValue, range, textInputRange, len, endRange;

    if (typeof el.selectionStart == "number") {
        start = el.selectionStart;
        end = (typeof el.selectionEnd == "number") ? el.selectionEnd : -1;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start...