我试图挂钩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);
};