codemirror autocomplete after any keyup?

Question

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 autocomplete for codemirror:

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

But both of these trigger on specific keys (Control-Space for one and '<' for the other) and both use the extraKeys functionality to process the events, but I want to trigger from any key. I have tried the following:

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

But have had no luck. Any suggestions on how I could trigger from any keyup events?

Answer 1

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

Answer 2

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

it may works

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

To also display the autocomplete widget:

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