'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 |