How to add variable,function,class which defined in run time to CodeMirror auto completion list and remove them when deleting from code in JS

Question

I'm using CodeMirror library for my online python code editor project.It's auto completion working fine. But I want to add user defined variables, functions, classes to auto complete list and remove them from list when I remove the definition from editor at run time. Also I want to do this in vanilla JS without JQuery.

var editor = CodeMirror.fromTextArea(myTextarea, {
        mode: {
            name: "python",
            version: 3,
            singleLineStringErrors: false
        },
        lineNumbers: true,
        indentUnit: 4,
        extraKeys: {
            "Ctrl-Space": "autocomplete",
            "Ctrl-/": "toggleComment",
            "Alt-E": runCode,
            "Alt-C": clearOutput

        },
        matchBrackets: true,
        autoCloseBrackets: true
    });

Answer 1

Finally I found that anyword-hint.js of CodeMirror can use to acomplish this task. So I combine the functionality of python-hint.js & anyword-hint.js. (I used npm to install CodeMirror because I was working with a NodeJs project)

<script src="node_modules/codemirror/lib/codemirror.js"></script>
<script src="node_modules/codemirror/mode/python/python.js"></script>

<script src="python-hint.js"></script>
<!-- this script not contains in CodeMirror. I have added manually -->


<script src="node_modules/codemirror/addon/hint/anyword-hint.js"></script>
<script src="node_modules/codemirror/addon/hint/show-hint.js"></script>


<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="node_modules/codemirror/addon/hint/show-hint.css">

 <script>
    function getAllHints(e) {
        var hints = CodeMirror.pythonHint(e);
        var anyHints = CodeMirror.hint.anyword(e);

        anyHints.list.forEach(function(hint) {
            if (hints.list.indexOf(hint) == -1)
                hints.list.push(hint);
        })

        hints.list.sort();

        if (hints) {
            CodeMirror.on(hints, "pick", function(word) {
                if (word.charAt(word.length - 1) == ')')
                    editor.execCommand("goCharLeft");
            });
        }
        return hints;
    }

    function showAllHints() {
        editor.showHint({
            hint: getAllHints,
            completeSingle: false
        });
    }

    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
        mode: {
            name: "python",
            version: 3
        },
        lineNumbers: true,
        indentUnit: 4
    });

    editor.on('inputRead', function onChange(editor, input) {
        if (input.text[0] === ' ' || input.text[0] === ":" || input.text[0] === ")") {
            return;
        }
        showAllHints();
    });
</script>

I have removed

if(completionList.length == 1) {
  completionList.push(" ");
}

(35-37 lines) from python-hint.js because I have set completeSingle: false in my showAllHints() function.

I know that getAllHints(e) function can optimize more & have some issues like can't filter out variable, function, class names. Which means the hint list includes variable, function, class names & also includes previously typed strings, numbers etc. However this is what I expected to do. So I decided to post as a answer before optimizing. Any optimization tips, suggestions an more better answers also welcome.