任何密钥后的codemirror自动完成？

Question

我正在尝试添加自定义自动完成功能,我想在用户输入时触发(当然可配置).我找到了几个代码镜像自动完成的例子:

http://codemirror.net/demo/complete.html和 http://codemirror.net/demo/xmlcomplete.html

但是这两个触发器都在特定键上触发(Control-Space为一个,而'<'为另一个),并且都使用该extraKeys功能来处理事件,但我想从任何键触发.我尝试过以下方法:

        var editor = CodeMirror.fromTextArea(document.getElementById("code"),
        {
             lineNumbers: true,
             mode: "text/x-mysql",
             fixedGutter: true,
             gutter: true,
//           extraKeys: {"'.'": "autocomplete"}
             keyup: function(e)
             {
                console.log('testing');
             },
             onkeyup: function(e)
             {
                console.log('testing2');
             }
        });

但没有运气.关于如何触发任何键盘事件的任何建议？

Answer 1

对于5.7版本,之前提出的解决方案都不适用于我(我认为即使对于早期版本它们也有错误).我的解决方案:

    myCodeMirror.on("keyup", function (cm, event) {
        if (!cm.state.completionActive && /*Enables keyboard navigation in autocomplete list*/
            event.keyCode != 13) {        /*Enter - do not open autocomplete list just after item has been selected in it*/ 
            CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
        }
    });

这个怎么运作:

仅当它尚未打开时才会打开自动完成弹出窗口(否则键盘导航会导致重新打开弹出窗口,再次选择第一个项目).

当您单击Enter时,您希望弹出窗口关闭,因此这是一个不应该触发自动完成的字符的特殊情况(您可以考虑一种情况,当您想要显示空行的antocompletion时).

然后最后一个修复是设置completeSingle: false,当你输入一些单词时会阻止大小写,并且在中间它会自动完成并继续通过反射键入.因此用户总是需要从弹出窗口中选择预期的字符串(即使它是单个选项).

Answer 2

要显示自动完成小部件:

onKeyEvent: function (e, s) {
    if (s.type == "keyup") {
        CodeMirror.showHint(e);
    }
}

Answer 3

editor.on("inputRead",function(cm,changeObj){
   // hinting logic
})

就我所见,"inputRead"是在"codemirror"中显示"自动完成"的最佳事件.唯一的缺点是您无法在退格或删除时显示提示.

Answer 4

通过以下方式可以实现类似IntelliSense的行为:

var ExcludedIntelliSenseTriggerKeys =
{
    "8": "backspace",
    "9": "tab",
    "13": "enter",
    "16": "shift",
    "17": "ctrl",
    "18": "alt",
    "19": "pause",
    "20": "capslock",
    "27": "escape",
    "33": "pageup",
    "34": "pagedown",
    "35": "end",
    "36": "home",
    "37": "left",
    "38": "up",
    "39": "right",
    "40": "down",
    "45": "insert",
    "46": "delete",
    "91": "left window key",
    "92": "right window key",
    "93": "select",
    "107": "add",
    "109": "subtract",
    "110": "decimal point",
    "111": "divide",
    "112": "f1",
    "113": "f2",
    "114": "f3",
    "115": "f4",
    "116": "f5",
    "117": "f6",
    "118": "f7",
    "119": "f8",
    "120": "f9",
    "121": "f10",
    "122": "f11",
    "123": "f12",
    "144": "numlock",
    "145": "scrolllock",
    "186": "semicolon",
    "187": "equalsign",
    "188": "comma",
    "189": "dash",
    "190": "period",
    "191": "slash",
    "192": "graveaccent",
    "220": "backslash",
    "222": "quote"
}

EditorInstance.on("keyup", function(editor, event)
{
    var __Cursor = editor.getDoc().getCursor();
    var __Token = editor.getTokenAt(__Cursor);

    if (!editor.state.completionActive &&
        !ExcludedIntelliSenseTriggerKeys[(event.keyCode || event.which).toString()] &&
        (__Token.type == "tag" || __Token.string == " " || __Token.string == "<" || __Token.string == "/"))
    {
        CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
    }
});

Answer 5

使用此功能可以在没有 CTRL + 空格的情况下自动完成 codeMirror。

在 show-hint.js 中将 completeSingle 设置为 false

editor.on("inputRead", function(instance) {
    if (instance.state.completionActive) {
            return;
    }
    var cur = instance.getCursor();
    var token = instance.getTokenAt(cur);
    if (token.type && token.type != "comment") {
            CodeMirror.commands.autocomplete(instance);
    }
});

Answer 6

注意：此答案不适用于最新版本的 CodeMirror。

onKeyEvent: function(e , s){
                if (s.type == "keyup")
                {
                    console.log("test");   
                }
            }