CodeMirror - 自动完成“选项”设置不正确答案

【问题标题】：CodeMirror - AutoComplete "options" not setting rightCodeMirror - 自动完成“选项”设置不正确
【发布时间】：2014-05-16 20:41:09
【问题描述】：

我正在使用CodeMirror 并尝试对自动完成弹出窗口进行一些 CSS 样式设置。这有点困难，因为当我去检查样式和东西时，我需要它不会消失。

所以我寻找一种方法来做到这一点。我在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); });
}

如果我将此注释掉，那么当我点击其他内容时，自动完成弹出窗口不会消失；这就是我想要的。但我想我会对此进行更多探索，并尝试确定如何随意打开和关闭它。

所以我希望能够自己设置这个closeOnUnfocus 选项。这看起来很简单。

不过，我找不到这样做的方法。进一步探索，我在代码镜像的网站上找到了一个示例，该示例演示了使用以下代码设置自动完成系统的方法；

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

进一步探索，show-hint.js 从一个名为 showHint 的函数开始，该函数具有此签名；

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

好的，所以我可以通过在这里传递我的选项来完成我想要的事情；像这样……

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

但这不起作用 - 事实上，选项似乎根本没有通过。如果我在show-hint.js 中执行console.log，则这些选项将被完全忽略。他们永远无法通过。

那么我怎样才能通过选项？我很困惑。

【问题讨论】：

标签： css autocomplete codemirror

【解决方案1】：

如果您想更改提示菜单的样式，只需使用提供的 CSS 挂钩即可。没有必要搞乱自动完成处理程序。例如：

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

这是现场直播Demo。

【讨论】：

嘿，这是我最终想要完成的，但实际的问题是如何让选项通过。如果我围绕这个特定答案创建一个新问题，以便给你正确的分数，你会接受吗？
我建议您将其拆分为另一个问题，是的。但是，我仍然没有看到需要破解原始的显示提示代码只是为了让菜单挂起以供检查。您可以使用浏览器的开发工具来做到这一点，而无需更改代码。如果您不注释掉部分显示提示代码，您可以传递选项吗？
你是对的，我可以。但是，现在到了我希望理解推理而不是简单地完成任务的地步。我想了解为什么这不起作用，我想知道我不知道的 javascript 所做的事情背后的逻辑。它已经从解决问题转变为简单地启发自己。
我在这里为您提出了另一个问题：stackoverflow.com/questions/22793843/…

【解决方案2】：

我刚开始使用 Codemirror (v4.1)，我发现了同样的问题。检查 show-hint.js 内容后，文档似乎没有更新。

当你想得到建议时试着写这个：

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

如果你需要使用异步模式获取建议（我的情况就是这样），现在你必须在之前的 sn-p 之前这样做：

CodeMirror.hint.deluge.async = true;

希望这会有所帮助！

【讨论】：

【解决方案3】：

你可以像这样传递选项：

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

您可以编写如下代码：

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

它对我有用。

【讨论】：