Advanced Autocomplete in ACE Editor

Question

I want to add complex code completion to the ACE editor.

For example, if I entered the following JavaScript code in ACE ...

function Car() {} Car.prototype = { model : '', maxSpeed : 0 }; var bugatti = new Car(); bugatti. 

... after hitting a point after bugatti , the options " model " and " maxSpeed " will appear.

I know that ACE has a new enableBasicAutocompletion function, but it seems very missing. I hope that autocomplete is based on the code entered in the ACE editor and appears just by clicking. key. Autocomplete suggestions will be properties for this object.

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

At 1:45, you can see that autocomplete is based on custom JavaScript, but there is no demonstration or explanation of how this was done.

Answer 1

The TernJS project is what you are looking for.

Here is an example of integration with ACE.

Answer 2

Now my part is Ace. Although I did not find it documented in the API, but rather through a hard network search: Add ace / ext-language_tools.js to your html. The dot form does not work well, so you may need to enter ctrl-space or alt-space for this (although if you write a little property / method you want to call, it should show), but standard syntax data such as a function letters will now show. Then in js:

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