CodeMirror - AutoComplete "options" not setting right

Question

I am using CodeMirror and attempting to do some CSS styling to the autocomplete pop up. This is a bit difficult, because I need it to not go away when I go to inspect styles and stuff.

So I hunted for a way to do this. I found this code in show-hint.js

if (options.closeOnUnfocus !== false) {
    var closingOnBlur;
    cm.on("blur", this.onBlur = function () { closingOnBlur = setTimeout(function () { completion.close(); }, 100); });
    cm.on("focus", this.onFocus = function () { clearTimeout(closingOnBlur); });
}

If I comment this out, then the autocomplete pop up does not go away when I click on other things; That's what I wanted. But I thought I would explore this more and try to determine what to do to toggle this on and off at will.

So I wanted to be able to set this closeOnUnfocus option on my own. That seemed simple enough.

I cannot find a way to do this, though. Exploring further I found an example on code mirror's website that demonstrates a way to setup the autocomplete system using the following code;

  CodeMirror.commands.autocomplete = function(cm) {
    CodeMirror.showHint(cm, CodeMirror.hint.anyword);
  }

Exploring further, show-hint.js starts out with a function called showHint that has this signature;

CodeMirror.showHint = function (cm, getHints, options) {
    // We want a single cursor position.
    if (cm.somethingSelected()) return;
    if (getHints == null) {
        if (options && options.async) return;
        else getHints = CodeMirror.hint.auto;
    }

    if (cm.state.completionActive) cm.state.completionActive.close();

    var completion = cm.state.completionActive = new Completion(cm, getHints, options || {});
    CodeMirror.signal(cm, "startCompletion", cm);
    if (completion.options.async)
        getHints(cm, function (hints) { completion.showHints(hints); }, completion.options);
    else
        return completion.showHints(getHints(cm, completion.options));
};

Okay, so it stands to reason that I could accomplish what I want by passing my option through here; like this...

CodeMirror.commands.autocomplete = function (cm) {
    CodeMirror.showHint(cm, CodeMirror.hint.anyword, {
        closeOnUnfocus: false
    });
}

But this doesn't work - in fact, it seems that the options just don't get passed at all. If I do a console.log in the show-hint.js, the options are outright ignored. They never get through.

So how can I pass options through? I am very confused.

score 4 · Answer 1 · answered Mar 30 '14 at 13:14

4

If you want to change the styles of of the hint menu, just use the provided CSS hooks. There is no need to mess around with the autocomplete handlers. e.g.:

.CodeMirror-hints {
    background-color: red;
}
.CodeMirror-hint {
    background-color: green;
}
.CodeMirror-hint-active {
    background-color: blue;
    color: yellow;
}

And here's a live Demo.

answered Mar 30 '14 at 13:14

Eliran Malka

15,821
6
77
100

Hey, this is what I want to eventually accomplish, but the actual question is how to get options passed through. If I create a new question revolving around this specific answer so I can give you proper points, would that be acceptable to you? – Ciel Mar 31 '14 at 14:03
i advise you to split that into a different question, yes. i still don't see the need, however, to hack the original show-hint code just to get the menu to hang for inspection. you can do that with the browser's dev tools without the need to change the code. can you pass the options if you don't comment out parts of the show-hint code? – Eliran Malka Mar 31 '14 at 22:48
You are correct that I can. However, this is now to a point where I wish to understand the reasoning rather than simply accomplish the task. I want to understand why this is not working, I want to know the logic behind what javascript is doing that I am not aware of. It has moved onto from solving a problem to simply edifying myself. – Ciel Apr 01 '14 at 18:12
I have made another question for you here : http://stackoverflow.com/questions/22793843/codemirror-formatting-tern-intellisense-labels – Ciel Apr 01 '14 at 18:23

score 0 · Answer 2 · answered May 16 '14 at 12:41

I've just started to use Codemirror (v4.1) and I've found the same problem. After checking show-hint.js contents it seems that documentation is not updated.

Try to write this when you want to get the suggestions:

CodeMirror.showHint({hint: CodeMirror.hint.deluge, completeSingle: false, closeOnUnfocus: true});

If you need to use the async mode of getting suggestions (it was my case), now you have to do this before previous snippet:

CodeMirror.hint.deluge.async = true;

Hope this helps!

djadmin · Answer 3 · 2014-03-28T11:47:14.937

-1

You can pass the options like this :

CodeMirror.showHint(cm,CodeMirror.hint.anyword,{completeSingle: false,closeOnUnfocus:false});

You can write the code as follows:

editor.on("keyup",function(cm){ 
    CodeMirror.showHint(cm,CodeMirror.hint.deluge,{completeSingle: false});
  });

It's working for me.

edited Mar 28 '14 at 11:47

answered Mar 27 '14 at 21:20

djadmin

1,742
3
19
27

CodeMirror - AutoComplete "options" not setting right

3 Answers3