对象的 ACE 编辑器自动完成 [英] ACE Editor AutoComplete for an Object

问题描述

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

Let's say I have an object foo that has two keys bar, baz. I want to create a custom getCompletions so that when I have typed foo. then it shows bar and baz. How do I do that? The prefix variable in the callback only contains the very last key pressed.

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

In my real example, I'd need to make an AJAX call to get the keys of foo before doing this, that's why I need a custom auto completion.

推荐答案

在getCompletions中不用前缀，你可以绑定键."然后建立你的wordList.您可以将 wordList 设为全局并在 getCompletions 中使用，或者在绑定."后使用.使用此代码获取之前的项目即 foo，然后将值插入编辑器.

Instead of using the prefix in the getCompletions, you can bind the key "." and then build your wordList. You can make your wordList global and use inside getCompletions or once you bind the "." use this code to get the before item ie foo, and then insert the value into the editor.

比如，如果我们把wordList作为一个Global数组，那么当用户输入foo时.我们可以将这两个词都添加到 wordList 中，然后在 Autocompleter 中使用.

For example, If we take wordList as a Global array, and then when the user enters foo. we can add both the words into the wordList and then use in the 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

Inside the Autocompleter we can map the 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];

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

In order to use the Autocompletion always instead of waiting for the user to type the next characters to invoke the autocompletion list you could use the below snippet code during the initialization,

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

这篇关于对象的 ACE 编辑器自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！