Codemirror remote autcompletion - codemirror

Question

Codemirror has a nice example for autocompletion : link.
The idea is to have server side autocompletion (e.g. Ajax service that autocompletes Java). Does somebody has an example of a remote autocompletion with codemirror ?

Answer 1

I've been able to get async completions working with CodeMirror 5.3's show-hint.js by using the following (es6 flavoured, so for es3, replace let with var and the => with function)
While there's no actual ajax, it's hopefully obvious how to hook that in, just invoke callback in your ajax calls completion handler.
CodeMirror.registerHelper('hint', 'ajax', (mirror, callback) => {
let words = ['foo', 'bar', 'baz'];
let cur = mirror.getCursor();
let range = mirror.findWordAt(cur);
let fragment = mirror.getRange(range.anchor, range.head);
callback({
list: words.filter(w => w.indexOf(fragment) === 0),
from: range.anchor,
to: range.head
});
});
CodeMirror.hint.ajax.async = true;
CodeMirror.commands.autocomplete = function(mirror) {
mirror.showHint({ hint: CodeMirror.hint.ajax });
};
Key is to set the async property as the docs tells you to:
It is possible to set the async property on a hinting function to
true, in which case it will be called with arguments (cm, callback,
?options), and the completion interface will only be popped up when
the hinting function calls the callback

Answer 2

// javascript code
var editor;
function createEditor (data) {
editor = CodeMirror.fromTextArea(myTextarea, {
mode: "text/x-sql",
extraKeys: {"Ctrl-Q": "autocomplete"},
hint: CodeMirror.hint.sql,
hintOptions: {
tables: data ? data : {}
}
})
}
(function createEditorWithRemoteData () {
$.ajax({
type:'POST',
dataType:'json',
url:'data.json',
success:createEditor,
error:function () {}
})
})();
// data.json
{
"table1": [ "col_A", "col_B", "col_C" ],
"table2": [ "other_columns1", "other_columns2" ]
}