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

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

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

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

ps：是的,我很乐意不改变任何暗示并提供我自己的简单匹配我自己的话,但我不知道该怎么做.

提前致谢！！

解决方法

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

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

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

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

然后……代码,将用css类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);
};

原文地址：https://www.jb51.cc/js/157438.html