CodeMirrorのカスタムヒントリストが正しく動作しない

Question

私はCodeMirrorをフックし、自分の単語リストをプラグインしてオートコンプリートになるようにしようとしています。このリンクに基づいてhttps://stackoverflow.com/a/19269913/2892746私は以下を実装しようとしました。私はaを作成しました

私の言葉がオートコンプリートに表示されますが、正しくフィルタリングされないという問題があります。たとえば、 "f"と入力した後、Ctrl + Spaceを押します。しかし、私は "マリアーノ"が選択されたポップアップで3つの単語すべてを取得します。私は「Florencia」のみを利用可能にして選択することを期待しています。

私は間違っていますか？

ps：はい、私はanywordのヒントを変更せず、自分の言葉に単にマッチするだけの自分自身を提供したいと思っていますが、その方法はわかりません。

ありがとうございます！

Answer 1

私はついに自分自身を解決しました。私はJSの専門家ではありませんが、それが他の人にとって有益な場合に備えて私のソリューションを共有しています。

重要：​​から元のコードを取得しました。このプロジェクトは、角度と角度のコードミラーの依存性を持っていました。私はアプリのどこにでもAngularを使用していないので、Angularなしで使用するように抽出して調整しました。

目的は、オートコンプリートに使用される単語/辞書のマップを定義できるようにすることです。解決策は非常に簡単です。 myTextAreaId要素の親で、あなたはこのようなスパン/ DIV作成する必要があります...そして、コードを

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

を、CSSクラスcodeMirrorDictionaryHintDivでclosest要素を検索します属性codemirror-dictionary-hintを抽出し、でそれを評価しますJavascript配列を取得してヒント関数の入力辞書として設定するだけです。

コードは次のとおりです。

var dictionary = []; 

var dictionary = eval($('#myTextAreaId').closest('.codeMirrorDictionaryHintDiv').attr('codemirror-dictionary-hint')); 
if (dictionary == null) { 
    dictionary = []; 
}; 


// Register our custom Codemirror hint plugin. 
CodeMirror.registerHelper('hint', 'dictionaryHint', function(editor) { 
    var cur = editor.getCursor(), 
     curLine = editor.getLine(cur.line); 
    var start = cur.ch, 
     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); 
};