2012-08-08 140 views
5

Codemirror有一个很好的自动完成示例:linkCodemirror远程自动完成

想法是让服务器端自动完成(例如自动完成Java的Ajax服务)。有人有一个与codemirror远程自动完成的例子吗?

+0

你是什么意思回调?这都是客户端。代码镜像模式(用于自动完成)都是在浏览器中执行的JavaScript程序。 – 2012-08-08 10:00:43

+0

该建议来自Ajax请求(服务器端) – ic3 2012-08-08 10:29:46

回答

0
// 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

这意味着一个固定的完成列表 – Svend 2015-06-12 21:23:50

1

我已经能够得到异步完井与CodeMirror 5.3秀,hint.js工作通过以下(ES6味,所以对于ES3,与var更换let=>function

虽然没有实际的ajax,但希望能够明确如何挂接它,只需在您的ajax调用完成处理程序中调用callback即可。

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属性作为文档告诉你:

它可以在提示功能异步属性设置为 真,在这种情况下,它会被称为与参数(厘米,回调, ?选项),并完成界面只会弹出时 的提示函数调用