'ACE Editor Autocomplete to open on `.`

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.



Solution 1:[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");
    }
});

Solution 2:[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);

Solution 3:[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 }.

Using react-ace it's simply:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Harsha pps
Solution 2 Albena Kertova
Solution 3 Eran