我可以将任何库与 codemirror 一起用于自动完成吗？答案

【问题标题】：There are any lib can I use with codemirror for autocomplete?我可以将任何库与 codemirror 一起用于自动完成吗？
【发布时间】：2016-09-23 16:02:34
【问题描述】：

我正在使用 codemirror 编辑器...我想在列表中设置样式，当我执行自动完成时会出现这些项目...所以我可以与 codemirror 一起使用的任何库或插件为我提供了比 codemirror 更多的功能. .. 注意：我想将它与 codemirror 一起使用，而不是 codemirror。 ...提前谢谢

【问题讨论】：

标签： autocomplete codemirror

【解决方案1】：

我成功了。在 show-hint.css 我添加了一些 CSS：

.table.CodeMirror-hint {
  font-weight: bold;
  color: black;
}

.column.CodeMirror-hint {
  font-weight: bold;
  color: black;
}

.keyword.CodeMirror-hint {
  font-weight: bold;
  color: #BF00FF;
}

.builtin.CodeMirror-hint {
  font-weight: bold;
  color: #2E64FE;
}

在我的主网页中，我将所有表/列作为对象动态添加到hintOptions。对于每个表，我都这样做：

        var tcobjs = []; //table columns array of object
        for (j=0; j < tablecolumns.length; j++) {
            tcobjs.push({text:tablecolumns[j],className:"column"});
        }
        hintOptions.tables[table]=tcobjs;

我像这样修改了 addon/hint/sql-hint.js：

  var keywords;
  var builtin;

  function getKeywords(editor) {
    var mode = editor.doc.modeOption;
    if (mode === "sql") mode = "text/x-sql";
    var words = {};
    for (var w in CodeMirror.resolveMode(mode).keywords) { words[w] = CodeMirror.resolveMode(mode).keywords[w]; }
    return words;
  }

  function getBuiltin(editor) {
    var mode = editor.doc.modeOption;
    if (mode === "sql") mode = "text/x-sql";
    var words = {};
    for (var w in CodeMirror.resolveMode(mode).builtin) { words[w] = CodeMirror.resolveMode(mode).builtin[w]; }
    return words;
  }

[....]

    keywords = getKeywords(editor);
    builtin = getBuiltin(editor);

[....]

      addMatches(result, search, tables, function(w) {return {text:w,className:"table"};});
      addMatches(result, search, defaultTable, function(w) {return {text:w,className:"table"};});
      if (!disableKeywords)
        addMatches(result, search, keywords, function(w) {return {text:w.toUpperCase(),className:"keyword"};});
      addMatches(result, search, builtin, function(w) {return {text:w.toUpperCase(),className:"builtin"};});

【讨论】：

你能把你的解决方案放在 jsbin 中吗？
我定义了我自己的模式，所以我有我自己的词和我自己的功能......我没有使用sql模式

【解决方案2】：

是的，您可以使用hint addon 进行自动完成。您可以通过修改addon/hint/show-hint.css来设置项目的样式。

【讨论】：

如何在下拉列表中以不同的方式设置单个项目的样式，以使所有项目的样式都不相同？
@Jan 如果您只是想为所选（或说活动）项目设置不同的样式，您应该更改li.CodeMirror-hint-active 内addon/hint/show-hint.css 的CSS 规则。或者，如果您想为每个项目设置不同的样式（但我无法想象为什么），您应该传递对象而不是字符串作为提示项目，以便您可以设置每个自己的 className。详情请查看hint addon document。
例如，如果您有一个包含表名/列名、sql 函数（avg、sum、...）和 sql 关键字（select、from、where、...）的下拉列表，并且想要区分更多通过使用不同的颜色在这些之间突出显示..