Advanced autocomplete in ACE Editor

Question

I'm looking to add sophisticated code completion to the ACE editor.

For example, if I typed the following JavaScript into ACE...

function Car() {}

Car.prototype = {
    model : '',
    maxSpeed : 0
};

var bugatti = new Car();
bugatti.

... upon hitting the dot after bugatti, the options "model" and "maxSpeed" would appear.

I know ACE has the new "enableBasicAutocompletion" feature, but this seems very lacking. I'm hoping to have autocomplete based on the code typed into the ACE editor, and appears by simply hitting the . key. The autocomplete suggestions would be the properties for that object.

The closest thing I can find is in this YouTube video: http://youtu.be/CSEDIhT6bXU

At 1:45, you can see the autocomplete is based on the user's JavaScript, but there's no demo or explanation of how this was accomplished.

Answer 1

The TernJS project is what you are looking for.

Here's an example integration with ACE.

Answer 2

Yup its part of Ace nowadays. Although I did not find it documented in the API but rather through a hard net search: Add the ace/ext-language_tools.js to your html. The dot form does not work well yet, so you may have to enter ctrl-space or alt-space for that (although if you write a bit of the property/method you want to call it should show), but standard syntax stuff such as writting function, will now show. Then in your js:

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

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