Ace 编辑器自动完成 - 两步自动完成答案

【问题标题】：Ace Editor Autocomplete - two steps autocompleteAce 编辑器自动完成 - 两步自动完成
【发布时间】：2016-03-21 10:33:34
【问题描述】：

我正在尝试让 Ace Editor 支持我自己的查询语言的自动完成功能。

查询本身如下所示

city:newyork color:red color:blue

在上述情况下，我希望用户在输入“c”时可以看到“城市”和“颜色”。而在他选择了“颜色”之后，他可以直接在建议列表中看到“红色”和“蓝色”两个选项。

我检查了 getCompletions: function(editor, session, pos, prefix, callback) 的所有参数。但仍然无法找出更好的方法来做到这一点。任何建议将不胜感激。

【问题讨论】：

标签： autocomplete ace-editor

【解决方案1】：

不可能直接或通过 ace 编辑器默认自动完成。但我有示例代码可以完全满足您的要求。第1步：您必须创建编辑器对象并设置选项：

ace.require("ace/ext/language_tools");
    var editor = ace.edit('div_id');
    editor.setTheme("ace/theme/textmate");
    editor.getSession().setMode("ace/mode/yaml");
    editor.getSession().setTabSize(4);
    editor.getSession().setUseSoftTabs(true);
    editor.setDisplayIndentGuides(true);
    editor.setShowInvisibles(true);
    editor.setShowPrintMargin(false);
    editor.setOption("vScrollBarAlwaysVisible", true);
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true
    });


var EditorWordCompleter = {
    getCompletions: function(editor, session, pos, prefix, callback) {
        getWordList(editor, session, pos, prefix, callback);
        }
    }

var getWordList = function(editor, session, pos, prefix, callback) {
    var wordList = [];
    if(prefix === 'T') {
        wordList.push('List of tasks');
    } 
    wordList = $.unique(wordList);
    callback(null, wordList.map(function(word) {
        return {
            caption: word,
            value: word
        };
    }));
}

请根据您的要求进行更改。

【讨论】：