How to add new auto complete values to existing auto completion results dynamically

v6
1

Hey I’m trying to add codemirror to my project and I’ve a use case where I need to add new auto complete items to existing array as user types in editor…
for now I’ve implemented till this

initTextSuggestionCodeMirror() {
    var autocomplete = autocompletion({
      activateOnTyping: true,
      override: [this.myCompletions],
    });

    this.view = new EditorView({
      doc: this.code,
      extensions: [
        oneDark,
        minimalSetup,
        // Transaction filters can inspect transactions and
        // add/replace them with other transactions. If a
        // transaction would have made the document more than
        // one line long, it is filtered out.
        EditorState.transactionFilter.of((tr) => {
          return tr.newDoc.lines > 1 ? [] : [tr];
        }),
        autocomplete,
        keymap.of([...defaultKeymap]),
      ],
      parent: this.leeraTextEditorContainer.nativeElement,
    });
  }

and My completion function is

myCompletions(context: CompletionContext): CompletionResult | null {
    let word = context.matchBefore(/\w*/);
    if (word?.from == word?.to && !context.explicit) return null;
    return {
      from: word?.from as number,
      options: [
        { label: 'match', type: 'keyword' },
        { label: 'hello', type: 'variable', info: '(World)' },
        { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
      ],
    };
  }

So I need a add more values to this options array dynamically as user types… It’s a readonly Completion[] so as soon as I give it a reference to another array as options: “this.my_dynamic_array” it breaks and competition doesn’t work at all…

options: [
        { label: 'match', type: 'keyword' },
        { label: 'hello', type: 'variable', info: '(World)' },
        { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
      ],
2

Your completion source will be queried again as the user types. Adding completions is not done by mutating the previously returned array, but by making sure new calls to your completion source return an array that includes more options.

1 Like
3

Thanks I made it work by returning Promise directly from my completion source instead of returning CompletionResult…

Thanks for your reply!!

Now I just want to make the auto completed variable an inline widget that can be clicked…