Javascript CodeMirror自定义提示列表工作不正常
我正在尝试挂接CodeMirror并插入我自己的单词列表以显示在自动补全中。基于此链接,我尝试实现以下内容。我创造了一个 问题是,虽然我的话确实出现在自动完成中,但它们没有被正确过滤。例如,我键入“f”,然后按ctrl+space。但是我在弹出窗口中选择了“mariano”这三个词。我希望只有“弗洛伦西亚”可供选择 知道我做错了什么吗 ps:是的,我不想改变Javascript CodeMirror自定义提示列表工作不正常,javascript,codemirror,Javascript,Codemirror,我正在尝试挂接CodeMirror并插入我自己的单词列表以显示在自动补全中。基于此链接,我尝试实现以下内容。我创造了一个 问题是,虽然我的话确实出现在自动完成中,但它们没有被正确过滤。例如,我键入“f”,然后按ctrl+space。但是我在弹出窗口中选择了“mariano”这三个词。我希望只有“弗洛伦西亚”可供选择 知道我做错了什么吗 ps:是的,我不想改变任何单词的提示并提供与我自己的单词完全匹配的提示,但我不知道怎么做 提前谢谢 我终于自己解决了这个问题。我不是JS专家,但我会分享我的解决方
任何单词的提示并提供与我自己的单词完全匹配的提示,但我不知道怎么做
提前谢谢 我终于自己解决了这个问题。我不是JS专家,但我会分享我的解决方案,以防它对其他人有用
重要:我从中获得了原始代码。该项目具有角度和角度代码镜像依赖性。我没有在我的应用程序中使用Angular,所以我提取并调整了它,使其在没有Angular的情况下使用
目标是能够定义用于自动完成的单词词典/地图。解决方案非常简单。在myTextAreaId
元素的父级,必须创建如下span/div:
<div class="codeMirrorDictionaryHintDiv" codemirror-dictionary-hint="[ 'Soccer', 'Cricket', 'Baseball', 'Kho Kho' ]"></div>
这是在JS和Css提示文件未加载时发生的!
要解决此问题,您必须手动将其导入应用程序:
1-在TypeScript文件中导入Js文件:
2-将Css文件导入Css应用程序文件
祝你好运你知道你问题的答案吗?我也有同样的问题,搜索答案@Mariano Martinez PeckI刚刚回答了我自己的问题。如果有帮助,请告诉我。工作很有魅力。谢谢
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);
};
//CodeMirror
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/show-hint';
//CodeMirror
@import "~codemirror/addon/hint/show-hint.css";