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

Question

我试图挂钩CodeMirror并插入我自己的单词列表以显示在自动完成中.基于此链接/sf/answers/1348893941/我试图实现以下内容.我用它创建了一个JSBin

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

我有什么想法可能做错了吗？

ps:是的,我希望不要改变anyword提示并提供我自己的简单匹配我自己的话,但我不知道该怎么做.

提前致谢!!

Answer 1

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

重要提示：我从这个项目中获得了原始代码。该项目具有 Angular 和 Angular-codemirror 依赖性。我没有在应用程序中的任何地方使用 Angular，因此我提取并调整它以在没有 Angular 的情况下使用它。

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

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

然后...代码将查找closest具有 css class 的元素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);
};