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

【问题标题】：CodeMirror custom hint list not working properlyCodeMirror 自定义提示列表无法正常工作
【发布时间】：2019-10-15 14:47:03
【问题描述】：

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

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

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

ps：是的，我希望不更改anyword 提示并提供与我自己的话相匹配的提示，但我不知道该怎么做。

提前致谢！！

【问题讨论】：

你知道你的问题的答案吗？我有同样的问题并搜索答案@Mariano Martinez Peck
我刚刚回答了我自己的问题。让我知道这是否有帮助。

标签： javascript codemirror

【解决方案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 类 codeMirrorDictionaryHintDiv 查找 closest 元素，将提取属性 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);
};

【讨论】：

像魅力一样工作。谢谢！

【解决方案2】：

JS 和 Css 提示文件未加载时会发生这种情况！要解决它，您必须手动将它们导入您的应用程序：

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

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

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

//CodeMirror
@import "~codemirror/addon/hint/show-hint.css";

祝你好运

【讨论】：