Niestandardowa lista wskazówek programu CodeMirror nie działa poprawnie

Question

Próbuję podłączyć się do CodeMirror i podłączyć własną listę słów, które pojawią się w autouzupełnianiu. Na podstawie tego linku https://stackoverflow.com/a/19269913/2892746 próbowałem wprowadzić następujące. Stworzyłem problem polegający na tym, że moje słowa pojawiają się w autouzupełnianiu, ale nie są poprawnie filtrowane. Na przykład wpisuję "f", a następnie robię ctrl + spacja. Ale dostaję wszystkie 3 wyrazy w okienku z wybranym "mariano". Spodziewałbym się, że tylko "Florencia" będzie dostępna i wybrana.

Jakieś pomysły, co mógłbym zrobić źle?

ps: tak, chciałabym nie zmieniać podpowiedzi anyword i dostarczać własnych, które pasują do moich własnych słów, ale nie wiem jak to zrobić.

Z góry dziękuję !!

Answer 1

Ostatecznie sam to rozwiązałem. Nie jestem ekspertem od JS, ale dzielę się moim rozwiązaniem na wypadek, gdyby było przydatne dla kogoś innego.

WAŻNE: Mam oryginalny kod z this project. Ten projekt był oparty na zależnościach Angular i Angular-codemirror. Nie używałem nigdzie Angulara w mojej aplikacji, więc wyodrębniłem i dostosowałem go, by używać go bez Angulara.

Celem jest zdefiniowanie słownika/mapy słów, które będą używane do autouzupełniania. Rozwiązanie jest bardzo proste. Na rodzic myTextAreaId elementu należy utworzyć zakresu/div tak:

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

... Następnie kod będzie Lookup element closest z klasy css codeMirrorDictionaryHintDiv, rozpakuje atrybut codemirror-dictionary-hint, oceni, że w aby uzyskać z niej tablicę JavaScript, a następnie ustaw ją jako słownik wejściowy dla funkcji podpowiedzi.

Kod jest:

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); 
};