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?

Answer 1

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.

Answer 2

Just add:

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

the enableLiveAutocompletion attribute will allow realtime popup