任何KEYUP后codemirror自动完成？(codemirror autocomplete af

-->

任何KEYUP后codemirror自动完成？(codemirror autocomplete af

2019-08-03 15:19发布

站内文章 / 前端开发

70 0

男人必须洒脱

女 | 书童

私信

我正在试图添加自定义自动完成，我想只要用户输入（可配置当然）来触发。我发现自动完成的codemirror的几个例子：

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

但是，这两个触发特定的键（控制-空间之一，“<”为其他），并都使用的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');
             }
        });

但有没有运气。我如何能够从任何KEYUP事件触发任何建议？

Answer 1:

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

Answer 2:

对于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});
        }
    });

这个怎么运作：

这将打开，只有当它没有被打开，但（否则键盘导航会造成重开与再次选择第1项弹出）自动完成弹出。

当您单击输入您要弹出关闭，所以这是不应该触发自动完成（如果你想显示为空行antocompletion虽然你可以考虑的情况下）字符的特殊情况。

然后最后的解决方法是设置completeSingle: false以防止情况下，当你输入一些字，并在中间它会自动完成，您可以通过反射继续输入。因此，用户总是需要选择弹出预期的字符串（即使是单选项）。

Answer 3:

为了还显示自动完成构件：

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

Answer 4:

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

据我所看到的，“inputRead”是为了显示“自动补全”，在“codemirror”最好的事件。唯一的缺点是，你不能显示的提示上退格或删除。

Answer 5:

最类似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 6:

editor.on('keyup', function(){
    CodeMirror.commands.autocomplete(editor);
});

它可以工作

Answer 7:

改变阿列克Pshenychnyy的回答一点（见这里），回答，因为我不能添加评论

下面只代码自动完成可以拿出当字母键被按下（可能是你想要的，而不是上的任意键）

editor.on("keyup", function (cm, event) {
if (!cm.state.completionActive &&   /*Enables keyboard navigation in autocomplete list*/
     event.keyCode > 64 && event.keyCode < 91){// only when a letter key is pressed
         CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
    }
});

（这应该在逻辑上工作，但可能有些请评论，如果这个工程或不！）

Answer 8:

让我分享任何包含KEYUP后自动完成（对蜂巢SQL）一个完整的例子：

包括脚本和样式：

<link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/static/codemirror/theme/material.css">
<link rel="stylesheet" href="/static/codemirror/addon/hint/show-hint.css" />

<script type="text/javascript" src="/static/codemirror/lib/CodeMirror.js"></script>
<script type="text/javascript" src="/static/codemirror/mode/sql/sql.js"></script>
<script type="text/javascript" src="/static/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="/static/codemirror/addon/hint/sql-hint.js"></script>

HTML：

<textarea id="code" name="code" rows="4" placeholder="" value=""></textarea>

脚本：

<script>

    $(function () {
        initSqlEditor();
        initAutoComplete();
    });

    // init sql editor
    function initSqlEditor() {

        var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            autofocus: true,
            extraKeys: {
                "Tab": "autocomplete"
            },
            hint: CodeMirror.hint.sql,
            lineNumbers: true,
            mode: 'text/x-hive',
            lineWrapping: true,
            theme: 'material',
        });

        editor.on('keyup', function(editor, event){
            // type code and show autocomplete hint in the meanwhile
            CodeMirror.commands.autocomplete(editor);
        });
    }

    /**
     * Init autocomplete for table name and column names in table.
     */
    function initAutoComplete() {

        CodeMirror.commands.autocomplete = function (cmeditor) {

            CodeMirror.showHint(cmeditor, CodeMirror.hint.sql, {

                // "completeSingle: false" prevents case when you are typing some word
                // and in the middle it is automatically completed and you continue typing by reflex.
                // So user will always need to select the intended string
                // from popup (even if it's single option). (copy from @Oleksandr Pshenychnyy)
                completeSingle: false,

                // there are 2 ways to autocomplete field name:
                // (1) table_name.field_name (2) field_name
                // Put field name in table names to autocomplete directly
                // no need to type table name first.
                tables: {
                    "table1": ["col_A", "col_B", "col_C"],
                    "table2": ["other_columns1", "other_columns2"],
                    "col_A": [],
                    "col_B": [],
                    "col_C": [],
                    "other_columns1": [],
                    "other_columns2": [],
                }
            });
        }
    }

</script>

Answer 9:

我想每个人都有自己的使用情况。我也不得不从不同的答案俱乐部的部分，使东西是最适合我的情况。

据对我来说，我想只显示上字母，数字和（。）在按住一个Ctrl键的例外建议。因为有时我复制或粘贴东西，所以不应该打开的建议。 46 ASCII为（）。我已经包含在数字。

activeEditor.on("keydown", function (cm, event) {
  if (
    !(event.ctrlKey) &&
    (event.keyCode >= 65 && event.keyCode <= 90) || 
    (event.keyCode >= 97 && event.keyCode <= 122) || 
    (event.keyCode >= 46 && event.keyCode <= 57)
  ) {
    CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
  }
});

做remeber包括三两件事 -

js和显示提示的CSS - <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css"> <script src="codemirror/addon/hint/show-hint.js"></script>
脚本语言要用于提示-为前- JavaScript的<script src="codemirror/addon/hint/javascript-hint.js"></script>
包括这条线在初始化代码编辑器。我使用的JavaScript提示。 hint: CodeMirror.hint.javascript

Answer 10:

使用此功能自动完成codeMirror没有CTRL +空格键。

设置completeSingle为false显示，hint.js

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);
    }
});

文章来源: codemirror autocomplete after any keyup?