codemirror autocomplete after any keyup?

前端 未结 11 1446
忘了有多久
忘了有多久 2020-12-29 04:06

I\'m working on trying to add a custom autocomplete, that I want to trigger whenever the user is typing (configurable of course). I\'ve found a couple examples of autocomple

相关标签:
11条回答
  • 2020-12-29 04:44

    I think everyone has their own use cases. I also had to club parts from different answers to make something which is best for my case.

    According to me, I want to show suggestions only on alphabets, numbers, and (.) with an exception of ctrl key pressed. because sometimes I copy or paste something, so that should not open suggestions. 46 ascii is for (.) which I've included with numbers.

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

    Do remeber to include 3 things -

    1. js and css of show hint - <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css"> <script src="codemirror/addon/hint/show-hint.js"></script>

    2. script for language you want the hint for - for ex - javascript <script src="codemirror/addon/hint/javascript-hint.js"></script>

    3. include this line while initializing your code editor. I've used javascript hint. hint: CodeMirror.hint.javascript

    0 讨论(0)
  • 2020-12-29 04:47

    NOTE: This answer does not work on recent versions of CodeMirror.

    onKeyEvent: function(e , s){
                    if (s.type == "keyup")
                    {
                        console.log("test");   
                    }
                }
    
    0 讨论(0)
  • 2020-12-29 04:47

    To also display the autocomplete widget:

    onKeyEvent: function (e, s) {
        if (s.type == "keyup") {
            CodeMirror.showHint(e);
        }
    }
    
    0 讨论(0)
  • 2020-12-29 04:49

    Use this function to autocomplete codeMirror without CTRL + Space.

    set completeSingle to false in the show-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);
        }
    });
    
    0 讨论(0)
  • 2020-12-29 04:53

    The most IntelliSense-like behavior can be achieved by this:

    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 });
        }
    });
    
    0 讨论(0)
  • 2020-12-29 04:55
    editor.on("inputRead",function(cm,changeObj){
       // hinting logic
    })
    

    As far I've seen, "inputRead" is the best event to show "auto completions" in "codemirror". The only drawback is that you can't show hints on backspace or delete.

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题