如何自定义 CodeMirror 的自动补全功能答案

【问题标题】：How to customize autocomplete function of the CodeMirror如何自定义 CodeMirror 的自动补全功能
【发布时间】：2016-10-13 08:27:19
【问题描述】：

我想为 Codemirror 自定义一个自动完成功能。

所以我已经构建了这段代码：

    CodeMirror.commands.autocomplete = function (cm) {
    var arrayTabNONDefault = new Array();
    var stringaCampi = null;
    var arrayTabellaCampo = null;
    var textVal = cm.getValue();
    textVal = textVal.toUpperCase();

    var res = textVal.match("SELECT(.*)FROM");
    if (res != null) {
    stringaCampi = res[1];
    arrayTabellaCampo = stringaCampi.split(",");
    var nomeTab = null;
    for (var i = 0; i < arrayTabellaCampo.length; i++) {
        nomeTab = (arrayTabellaCampo[i].split(".")[0]).trim();
        if (hintTables[nomeTab] == null)
        hintTables[nomeTab] = new Array();
    } //FINE FOR
    } //FINE IF

    CodeMirror.showHint(cm, CodeMirror.hint.sql, {
    tables: hintTables
    });

    cm.on("beforeChange", function (cm, change) {
    var before = cm.getRange({ line: 0, ch: 0 }, change.from);
    var text = cm.getRange(change.from, change.to);
    var after = cm.getRange(change.to, { line: cm.lineCount() + 1, ch: 0 });
    if (before.indexOf("FROM") !== -1)
    //                            alert("Ho scritto FROM");
        console.log("before change", before, text, after);
    });

    cm.on("change", function (cm, change) {
    var from = change.from;
    var text = change.text.join("\n");
    var removed = change.removed.join("\n");
    var to = cm.posFromIndex(cm.indexFromPos(from) + text.length);

    var before = cm.getRange({ line: 0, ch: 0 }, from);
    var after = cm.getRange(to, { line: cm.lineCount() + 1, ch: 0 });

    if (before.indexOf("FROM") !== -1)
        console.log("after change", before, removed, text, after);
    });


} //FINE ESTENSIONE

这是hintTables的内容

var hintTables = { "#T_TF_FilesList": ["FilesListHeaderID", "NumRecord", "FileTypeID", "FileID", "FilesListHeaderID", "NumRecord"],
            "#T_TF_SelectedItems": ["EventHeaderID", "ItemType", "ItemID1", "ItemID2", "EventHeaderID", "ItemType", "ItemID1", "ItemID2"],
            "#T_TFT_CacheSearchCriteriaHeaders": ["ID", "SyncDate", "FileTypeID", "CriteriaExpressionString", "CriteriaExpressionHash", "PageRecordsNumber", "PageNumber", "NumFiles"]
        };

所以我希望系统在我写FROM之后提出这个表的列表，或者系统应该在我写EXECUTE之后提出存储过程的列表。

可以这样做吗？

【问题讨论】：

标签： javascript autocomplete codemirror

【解决方案1】：

您是否尝试自定义 SQL 提示插件？如果是这样，您应该在 sql-hint.js 中进行更改（在 codemirror/addon/hint 下）。

基本上你应该做的是：

1.在您的app.js（主要逻辑的任何js文件）中，在"change"事件上调用editor.showHint({hint: CodeMirror.hint.sql)；

2.在sql-hint.js内部，当用户输入FROM或EXECUTE时返回{list: hintTables, from: somePos, to: somePos}，可以通过正则表达式或检查该行的标记来检测。我编了一些代码供大家参考：

var cursor = editor.getCursor();
var tokenAtCursor = editor.getTokenAt(cursor);
if (tokenAtCursor.type == "FROM-and-EXECUTE")
  return {list: hintTables, 
          from: CodeMirror.Pos(cur.line, tokenAtCursor.start), 
          to: CodeMirror.Pos(cur.line, tokenAtCursor.end)};

如果我误解了你的问题并且这个答案没有帮助，请告诉我，我会删除它。

【讨论】：