CODEWITHSUNDEEP
cssautocompletecodemirror
Ciel
Ciel

Reputation: 4440

CodeMirror - AutoComplete "options" not setting right

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.

Upvotes: 0

Views: 5328

Answers (3)

Rodrigo Lanza
Rodrigo Lanza

Reputation: 189

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!

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16263

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.

Upvotes: 4

djadmin
djadmin

Reputation: 1760

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.

Upvotes: -1

Related Questions