Geek asks and answers

Remote Codemirror autorun

Codemirror has a good example for autocomplete: link .

The idea is to autocomplete the server side (for example, an Ajax service that automatically populates Java). Does anyone have an example of remote autocomplete with codemirror?

+5
source share
2 answers

I managed to get asynchronous shutdown with CodeMirror 5.3 show-hint.js, using the following (es6 flavored, so for es3 replace leton varand =>on function)

While there is no real ajax, we hope, obviously, how to do this, just call the callbackajax call 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 });
};

async, :

async true, (cm, callback,?), ,

+1
// 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" ]
}
0

More articles:


All Articles