CodeMirror AutoComplete Custom List

Question

I am having a bit of difficultly re the auto complete function in code mirror. What I am trying to do is two things (both which I am struggling with):

1) I want to enable auto complete for both HTML and JavaScript. Currently I can only get one working at a time using e.g.:

 CodeMirror.commands.autocomplete = function (cm) {
     CodeMirror.showHint(cm, CodeMirror.hint.html);
 };

How can I add the CodeMirror.hint.javascript to the list from the HTML one?

2) (Kind of more important) -- How can I add custom variables to the list of hints from HTML which area retrieved from an ajax call.....

i.e. I want to have the drop down show up with the current list of data from the html hints, but then add custom entries such as ##SomeCode1## and ##SomeCode2##

I have two problems here. First when I try to hard code the values in the 'html-hint.js' file the values all get appended with <... which is not what I want.

The second problem, kind of, is that I believe I have to write a new 'html-hint.js' file correct? I mean there is no way to pass anything in the 'options' parameter in the CodeMirror.hint.html above is there, to essentially merge two list.

I guest one and two are kind of the same come to think of it... Merging two lists of values for auto complete together.

I am guessing there is nothing already in the framework and I have to write a custom hint file, correct?

Any pointers would be appreciated. Sample code would be awesome.

Answer 1

If you do not specify a hint function, the show-hint addon will take the hint helper function defined for the local mode at which the completion happens, so that will be CodeMirror.hint.javascript in JavaScript code, and CodeMirror.hint.html in HTML.

If you need to add your own completion logic, you can replace (or wrap) these functions by simply overwriting them with your own code.

Here is a crude example hack that always adds "bozo" to JavaScript completions:

var orig = CodeMirror.hint.javascript;
CodeMirror.hint.javascript = function(cm) {
  var inner = orig(cm) || {from: cm.getCursor(), to: cm.getCursor(), list: []};
  inner.list.push("bozo");
  return inner;
};

Answer 2

Thanks to @Marjin for brief explanation, but since it doesn't cover filtering and a lot of people needs it, here's what I've done in mongoclient by following Marjin's answer. And partially took help from here

p.s. Don't forget to change hint with yours, since I'm using javascript I've changed javascript hint.

CodeMirror.hint.javascript = function (editor) {
        var list = Session.get(Template.strSessionDistinctFields) || [];
        var cursor = editor.getCursor();
        var currentLine = editor.getLine(cursor.line);
        var start = cursor.ch;
        var end = start;
        while (end < currentLine.length && /[\w$]+/.test(currentLine.charAt(end))) ++end;
        while (start && /[\w$]+/.test(currentLine.charAt(start - 1))) --start;
        var curWord = start != end && currentLine.slice(start, end);
        var regex = new RegExp('^' + curWord, 'i');
        var result = {
            list: (!curWord ? list : list.filter(function (item) {
                return item.match(regex);
            })).sort(),
            from: CodeMirror.Pos(cursor.line, start),
            to: CodeMirror.Pos(cursor.line, end)
        };

        return result;
    };