Please help me with finding a suitable way to ge this working. Im not able to find a way to enable autocomplete on keyup for code mirror. Here is the js code ->

const htmlEditor = CodeMirror(document.querySelector(".editor .code .html-code"), {
    lineNumbers:true,
    tabSize: 4,
    mode: "xml",
    theme: "eclipse"
});

const cssEditor = CodeMirror(document.querySelector(".editor .code .css-code"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "css",
    theme:  "eclipse"
});

const jsEditor = CodeMirror(document.querySelector(".editor .code .js-code"), {
    lineNumbers:true,
    tabSize: 4,
    mode: "javascript",
    theme: "eclipse",
    matchBrackets: true,
    tabSize: 4,
    //below
    onKeyEvent: function (e, s) {
        if (s.type == "keyup") {
            CodeMirror.showHint(e);
        }
    }
});

document.querySelector("#run-btn").addEventListener("click", function(){
    let htmlCode = htmlEditor.getValue();
    let cssCode = "<style>" +  cssEditor.getValue() + "</style>";
    let jsCode = "<scri" + "pt>" + jsEditor.getValue() + "</scri" + "pt>";
    let previewWindow = document.querySelector("#preview-window").contentWindow.document;
    previewWindow.open();
    previewWindow.write(htmlCode+cssCode+jsCode);
    previewWindow.close();
})

I have imported the following including the local js and css files .

        <script src="codemirror\codemirror-5.65.1\lib\codemirror.js"></script>
        <link rel="stylesheet" href="codemirror/codemirror-5.65.1/lib/codemirror.css">
        <script src="codemirror/codemirror-5.65.1/mode/javascript/javascript.js"></script>  
        <script src="codemirror/codemirror-5.65.1/addon/hint/show-hint.js"></script>
        <link rel="stylesheet" href="codemirror/codemirror-5.65.1/theme/eclipse.css">