ACE Editor Autocomplete to open on `.`

Question

If you enable live autocomplete, the tooltip opens up as you type things. However, it will never open up on pressing . until you type something else after.

So if I were to type fo there will be a tooltip trying to match fo to something ( for or function , etc). However, if type fo. then the tooltip disappears, and it will not open until I type a further letter.

I have custom autocompletion keys, and I really want the tooltip to open up with all my suggestions.

Let's say I have user as a special key with name, age, profile as the suggestions. I want to be able to type event. and the tooltip to show name, age, profile . Right now, I have to type event.n for example to get name to show as a suggestion.

Answer 1

Use this snippet of code during the editor initialization to show the tooltip to open up with all the suggestions

editor.commands.on("afterExec", function (e) {
    if (e.command.name == "insertstring" && /^[\w.]$/.test(e.args)) {
        editor.execCommand("startAutocomplete");
    }
});

Answer 2

This worked for me for special characters (I needed the autocomplete on '.' and '{'. For some reason it is not working for '$':

@ViewChild('editor') public aceEditor: AceEditorComponent;
let editor = this.aceEditor.getEditor();
// create your completers
this.langTools.setCompleters(completers);
// trigger typeahead
editor.completer.showPopup(editor);

Answer 3

Found a simple solution for that finally:

const doLiveAutocomplete = editor => {
  editor.insert('.');
  editor.execCommand('startAutocomplete');
};

Use enableLiveAutocompletion with a custom command { bindKey: { win: '.', mac: '.' }, exec: doLiveAutocomplete } { bindKey: { win: '.', mac: '.' }, exec: doLiveAutocomplete } .

Using react-ace it's simply:

<AceEditor
  {...props}
  enableLiveAutocompletion
  commands={[{ bindKey: { win: '.', mac: '.' }, exec: doLiveAutocomplete }]} />