How to add my own completer in ace editor

Question

Now i am developing a simple web-based editor for my database backend. I found that ace comes with autocompleter, if I only need to do complete with SQL keywords, how should I add my own rules?

score 14 · Accepted Answer · edited Aug 19 '19 at 18:59

First, Activate the enableLiveAutocompletion as you mentioned, and you also have to ensure enableBasicAutocompletion is defined and set to true (see below).

editor.session.setMode("ace/mode/sql");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});

To add a new completer, do what eemp mentioned on github (here).

let langTools = ace.require('ace/ext/language_tools');

Then use the addCompleter method to add the completions as defined below:

var customCompleter = {
  getCompletions: function(editor, session, pos, prefix, callback) {
       // your code
       /* for example
        * let TODO = ...;
        * callback(null, [{name: TODO, value: TODO, score: 1, meta: TODO}]);
        */
  }

 }
langTools.addCompleter(customCompleter);

You can also go have a look at the following:

Ace docs on Completers.

`langTools.addCompleter(customCompleter)` presumably creates a _global_ completer. To attach the completer to the ace editor itself, use `editor.completers = [customCompleter]`. — Qwertie, Feb 27 '20 at 16:15

score 1 · Answer 2 · answered May 31 '17 at 10:31

1

Just add:

editor.session.setMode("ace/mode/sql");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});

the enableLiveAutocompletion attribute will allow realtime popup

answered May 31 '17 at 10:31

Zanecola

1,394
3
15
27

How to add my own completer in ace editor

2 Answers2

Linked