Autocompletion for Ace Editor

Question

OK, so here's the deal:

I'm using Ace Editor
The app the editor is integrated in, is written Objective-C/Cocoa
I need AutoCompletion (for a given set of keywords)

Now, here's the catch :

I know AutoCompletion is not yet natively supported
I know of some attempts by others (e.g. Codiad IDE, Gherkin, Alloy-UI), some making use of Jquery UI Autocomplete - but I still cannot figure out how this could be adapted to an existing Ace setup
I'm still not sure if I should go for a JS-oriented solution or just use Objective-C/Cocoa for that

Any help would be more than appreciated.

possible duplicate of [Autocompletion in ACE editor](http://stackoverflow.com/questions/13545433/autocompletion-in-ace-editor) — endorama, Nov 12 '14 at 14:00

score 19 · Accepted Answer · edited Apr 12 '14 at 08:35

AutoCompletion can be achieved in ace editor..

Code :

    var editor = ace.edit('editor');
    editor.setTheme("ace/theme/eclipse");
    editor.getSession().setMode("ace/mode/java");
    editor.setShowInvisibles(true);
    editor.setDisplayIndentGuides(true);
    editor.getSession().setUseWrapMode(true);    
    var jsonUrl = "JSON/Components/proce.json";
    //the url where the json file with the suggestions is present
    var langTools = ace.require("ace/ext/language_tools");
    editor.setOptions({enableBasicAutocompletion: true});
    var rhymeCompleter = {
        getCompletions: function(editor, session, pos, prefix, callback) {
            if (prefix.length === 0) { callback(null, []); return }
            $.getJSON(jsonUrl, function(wordList) {
                callback(null, wordList.map(function(ea)  {           
                    return {name: ea.word, value: ea.word, meta: "optional text"}
                }));
            })
        }
    }

    langTools.addCompleter(rhymeCompleter);

Json file format :

   [ {"word":"hello"}, 
   {"word":"good morning"},
   {"word":"suggestions"},
   {"word":"auto suggest"},
   {"word":"try this"}]

Reference/Demo :

http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview

mesosteros · Answer 2 · 2015-02-23T15:41:39.297

5

To add Live Auto Completion in Ace nowadays: In your HTML include the ace/ext-language_tools.js. The . call does not work well yet, so you may have to enter ctrl-space or alt-space for that, but standard syntax stuff such as writting function, will now show. Then:

var editor = ace.edit("editor");

ace.require("ace/ext/language_tools");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});

edited Feb 23 '15 at 15:41

answered Feb 23 '15 at 15:36

mesosteros

1,491
2
18
31

Didn't work for me when embedded in a application wrapper. I had to use `editor.setOptions("enableBasicAutocompletion", true);`. I think it's a bug in the application wrapper proxy interface and not in Ace. – 1.21 gigawatts Jul 31 '15 at 15:04

score 1 · Answer 3 · answered Feb 22 '13 at 21:23

The hard part of autocompletion is figuring out the keywords the rest is easy to do.

you need a popup, and listView to display completions, it might be better to use Cocoa based popup.
some filtering function, simple startsWith check will do, but you can use nicer flex match like sublime
trivial call to editor.session.replace to insert selected completion

For 2-3 you should comment at https://github.com/ajaxorg/ace/issues/110 about your specific usecase since there is a work to get native support for AutoCompletion.

Autocompletion for Ace Editor

3 Answers3