ACE编辑器自动完成对象

时间:2018-06-16 18:53:42

标签: javascript reactjs ace-editor

我们说我有一个对象foo,它有两个键bar, baz。我想创建一个自定义getCompletions,这样当我输入foo.时,它会显示barbaz。我怎么做?回调中的prefix变量仅包含按下的最后一个键。

在我的实例中,在执行此操作之前,我需要进行AJAX调用以获取foo的键,这就是我需要自定义自动完成的原因。

1 个答案:

答案 0 :(得分:1)

您可以绑定密钥"。"而不是在 getCompletions 中使用前缀。然后构建你的wordList。您可以将wordList设置为全局并在getCompletions中使用,或者在绑定"。"使用此代码获取之前的项目即foo,然后将值插入编辑器。

例如,如果我们将wordList作为全局数组,然后当用户输入foo时。我们可以将这两个单词添加到wordList中,然后在Autocompleter中使用。

editor.commands.addCommand({
    name: "dotCommand1",
    bindKey: { win: ".", mac: "." },
    exec: function () {
        var pos = editor.selection.getCursor();
        var session = editor.session;

        var curLine = (session.getDocument().getLine(pos.row)).trim();
        var curTokens = curLine.slice(0, pos.column).split(/\s+/);
        var curCmd = curTokens[0];
        if (!curCmd) return;
        var lastToken = curTokens[curTokens.length - 1];

        editor.insert(".");                

        if (lastToken === "foo") {
            // Add your words (bar, baz) to the global word list so that the autocomplete can show both bar, baz
           // Append the words to wordList here
        }
    }
});

在Autocompleter内部,我们可以映射wordList

var staticWordCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {

    callback(null, wordList.map(function(word) {
        return {
            caption: word,
            value: word,
            meta: "static",
            completer: {
                insertMatch: function(editor, data) {
                    var insertedValue = data.value;
                    if(insertedValue === "bar" || insertedValue === "baz") {
                        // You can clear the world list here
                    }
                }
            }
        };
    }));
  }
}
editor.completers = [staticWordCompleter];

为了始终使用自动完成而不是等待用户键入下一个字符来调用自动完成列表,您可以在初始化期间使用下面的代码段,

editor.commands.on("afterExec", function (e) {
    if (e.command.name == "insertstring" && /^[\w.]$/.test(e.args)) {
        editor.execCommand("startAutocomplete");
    }
});