codemirror - Codemirror 远程自动完成

Question

Codemirror 有一个很好的自动完成示例：链接。

这个想法是让服务器端自动完成（例如，自动完成 Java 的 Ajax 服务）。有人有使用 codemirror 远程自动完成的例子吗？

Answer 1

通过使用以下代码，我已经能够使用 CodeMirror 5.3 的 show-hint.js 获得异步完成（es6 风味，所以对于 es3，替换let为var和=>with function）

虽然没有实际的 ajax，但希望很明显如何将其挂钩，只需callback在您的 ajax 调用完成处理程序中调用即可。

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 });
};

关键是async按照文档告诉您的方式设置属性：

可以将提示函数的 async 属性设置为 true，在这种情况下，它将使用参数（cm、回调、？选项）进行调用，并且只有在提示函数调用回调时才会弹出完成界面

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" ]
}