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

标签 javascript codemirror

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

问题是虽然我的话确实出现在自动完成中,但它们没有被正确过滤。例如,我输入“f”,然后按 ctrl+space。但是我在弹出窗口中得到了所有 3 个单词,并选择了“mariano”。我希望只有“Florencia”可供选择。

知道我可能做错了什么吗?

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

提前致谢!

最佳答案

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

重要:我从 this project 得到了原始代码.该项目依赖于 Angular 和 Angular-codemirror。我没有在我的应用程序中的任何地方使用 Angular,所以我提取并调整它以在没有 Angular 的情况下使用它。

目标是能够定义将用于自动完成的单词字典/映射。解决方法很简单。在 myTextAreaId 元素的父元素中,您必须像这样创建一个 span/div:

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

然后...代码,将查找具有 css 类 codeMirrorDictionaryHintDivclosest 元素,将提取属性 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);
};

关于javascript - CodeMirror 自定义提示列表无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36652847/

相关文章:

javascript - 使用 Url.Action 和 jquery href attr 生成链接

HTML 中的 Javascript - 如何使图像在提交功能中可见? (无 CSS)

javascript - 如何将 HTML 文档作为起始值传递给 CodeMirror?

javascript - Laravel 4 JavaScript ajax 请求

javascript - 在 NodeJS 上重定向图像请求

javascript - 如何在 React Native 中根据其中心而不是起点旋转 svg?

javascript - Codemirror 2.2清除所有标记

jquery - 使用 CodeMirror 进行拖放功能

javascript - 更新时获取 Codemirror 文本框值

javascript - 如何对代码镜像进行撤销和重做操作