Question

我正在尝试挂钩CodeMirror并插入我自己的单词列表以显示在自动完成中。根据此链接https://stackoverflow.com/a/19269913/2892746，我尝试实施以下内容。我创建了一个JSBin with it

问题在于，虽然我的文字确实出现在自动填充中，但它们未正确过滤。例如，我键入“f”，然后我执行ctrl + space。但是我选中了“mariano”的弹出窗口中的所有3个单词。我希望只有“Florencia”可供选择。

任何想法我可能做错了什么？

ps：是的，我很乐意不改变anyword提示并提供我自己的提示，只是匹配我自己的话，但我不知道该怎么做。

提前致谢!!

Answer 1

我终于解决了这个问题。我不是JS专家，但我分享我的解决方案，以防它对其他人有用。

重要：我从this project获得了原始代码。该项目与Angular和Angular-codemirror相关。我没有在我的应用程序中的任何地方使用Angular，因此我提取并调整它以使用它而不使用Angular。

目标是能够定义将用于自动完成的单词的字典/地图。解决方案非常简单。在myTextAreaId元素的父元素处，您必须创建一个span / div，如下所示：

 <div class="codeMirrorDictionaryHintDiv" codemirror-dictionary-hint="[ 'Soccer', 'Cricket', 'Baseball', 'Kho Kho' ]"></div>

然后......代码将使用css类closest查找codeMirrorDictionaryHintDiv元素，将提取属性codemirror-dictionary-hint，将评估该元素以获取Javascript数组它，然后简单地将其设置为提示函数的输入字典。

代码是：

var dictionary = [];

try {
    // JSON.parse fails loudly, requiring a try-catch to prevent error propagation
    var dictionary = JSON.parse(
        document.getElementById('myTextAreaId')
         .closest('.codeMirrorDictionaryHintDiv')
          .getAttribute('codemirror-dictionary-hint')
    ) || []; 
} catch(e) {}


// Register our custom Codemirror hint plugin.
CodeMirror.registerHelper('hint', 'dictionaryHint', function(editor) {
    var cur = editor.getCursor();
    var curLine = editor.getLine(cur.line);
    var start = cur.ch;
    var end = start;
    while (end < curLine.length && /[\w$]/.test(curLine.charAt(end))) ++end;
    while (start && /[\w$]/.test(curLine.charAt(start - 1))) --start;
    var curWord = start !== end && curLine.slice(start, end);
    var regex = new RegExp('^' + curWord, 'i');
    return {
        list: (!curWord ? [] : dictionary.filter(function(item) {
            return item.match(regex);
        })).sort(),
        from: CodeMirror.Pos(cur.line, start),
        to: CodeMirror.Pos(cur.line, end)
    }
});

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

Answer 2

当未加载JS和Css提示文件时发生！为了解决该问题，您必须将它们手动导入到您的应用中：

1-在 TypeScript文件中导入 Js 文件：

GenerateWhiteNoise(int x_start_coord, int y_start_coord, int random_seed) {
    int default_x_width = 100;
    int default_y_heigth = 50;
    float[,] noiseFieldToReturn = new float[width, height];

    for (in x = x_start_coord; i < default_x_width + x_start_coord; x++)
    {
        for (in y = y_start_coord; i < default_y_width + y_start_coord; y++)
        {
            noiseFieldToReturn[i, j] = (float)pseudo_rnd_value(x, y, random_seed);
        }
    }
    return noiseFieldToReturn;
}

2-将 Css 文件导入您的 Css应用程序文件

//CodeMirror
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/show-hint';

好运

CodeMirror自定义提示列表无法正常工作

2 个答案: