2012-08-08 12 views
5

Codemirrorには、オートコンプリートの良い例があります:linkです。Codemirrorリモートオートコンプリート

アイデアは、サーバー側の自動補完(例:Javaを自動補完するAjaxサービス)を使用することです。誰かがcodemirrorを使ったリモートオートコンプリートの例を持っていますか?

私は(ES3のために、 functionvar=>letを置き換えるので、ES6風味)以下を使用してCodeMirror 5.3のショー-hint.jsで作業を非同期完了を取得することができました
+0

コールバックを呼び出したときに完了インターフェイスのみがポップアップ表示されますと、あなたはそれによって何を意味していますか?それはすべてのクライアント側です。コードモード(オートコンプリートに使用されるモード)は、すべてブラウザで実行されるjavascriptプログラムです。 –

+0

提案はAjaxリクエスト(サーバー側)から来ています – ic3

答えて

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

1

実際の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プロパティを設定することです:それが呼び出されます、その場合には、真 にヒンティング機能上の非同期プロパティを設定することが可能である

引数(センチ、コールバック、 ?オプション)、および ヒンティング機能が