Implementing an Intellisense-like solution would make ACE the "silver-bullet" IDE solution.

If one were to implement autocompletion on top of the current code:

• Is editor.getSession().on('change', callback) the event to handle to get notified on (for instance) '.', '(' keys pressed?
• Is there a simple way to present a list of autocomplete items to the user, and insert some text in the editor when the user selects an item?

Video: http://www.youtube.com/watch?v=8bjPrQYCzY8
Info: http://msdn.microsoft.com/en-us/library/hcw1s69b(vs.71).aspx

Intellisense also remembers your most frequently used methods and may prioritize them in the autocomplete list or even highlight them by default.

I have implemented a basic autocomplete widget on top of ace. You can see screenshots here: https://github.com/cucumber/gherkin-editor

Current features off the top of my head:

• Pure DOM - no baggage
• Basic keyboard handling
• Replaces editor text when option is selected
• Programmer decides row/column where it shows up
• Pluggable matcher (decide what to show)

If there is interest I would love to donate the plugin to the ace project so it can become a 1st class citizen and get the love it needs.

The code: https://github.com/cucumber/gherkin-editor/blob/master/public/js/gherkin-editor/autocomplete.js
Sample usage: https://github.com/cucumber/gherkin-editor/blob/master/public/js/gherkin-editor.js

Looks like a good start. Would love to see this in Ace.

Thanks for the feedback. I'll work on a patch following the existing code/api conventions.

Im developing a internal DSL, based on JSON structure. The DSL is used to define document structure (content types) for CMS system, which uses Document-oriented DB (like MongoDB) to save contents. Following is a simple example:

// BlogPost content type
{
package:'de.playcms.commons',
name: 'BlogPost',
extends: 'de.playcms.commons.Article',

schema: {
    content: {
        type: 'String',
        constraints: {
            maxLength: 2000,
            index:true
        },
        input: ''textarea", // in other situation can be textfield, select, checkbox
        application: {
            isSearchable: true,
            isSEOptimzed: true
        }
    },
    tags : {
        type:'String[]',
        constraints: {
            unique:true,
            maxSize: 10 // maximum  10 tags per blogpost
        },
        input: 'user-generated',
        application:{
            isSearchable: true
        }
    }
}

}

// Article content type
{
package:'de.playcms.commons',
name: 'Article',

schema: {
    title: {
        type: 'String',
        constraints: {
            maxLength: 200,
            index:true
        },
        input: ''textfield",
        application: {
            isSearchable: true,
            isSEOptimzed: true
        }
    },
    description: {
        type: 'String',
        constraints: {
            maxLength: 500,
            index:true
        },
        input: ''textarea",
        application: {
            isSearchable: true,
            isSEOptimzed: true
        }
    },
    image: {
        type: 'binary',
        constraints: {
            maxLength: 50000 //50000 bytes
        },
        input: ''file-upload",
        application: {
            accepts:['*.jpg', '*png']
        }
    }
}

}

The syntax-highlight support of JavaScript for JSON is ok, its not my priority now. What i really want now is autocomplete

• autocomplete for grammar keywords/context:
  static grammar keywords: package, name, type, schema, extends etc.
  context: for example after token 'type:' the editor should suggest: String, Integer, Boolean etc. Or whin the 'constraints:{ ... }', depends on the previously defined content-type (Integer, String) it should suggest corresponding constraints. For String it should be: nullable, maxLength, minLength etc.
• autocomplete which relys on data supplied by a external service.
  for example when the cursor within value token for package: 'de.playcms.comm', then the editor should suggest possible values. Because all these content-type definitions are save in DB, it is possble to provide the editor the exsiting values over a service-call. It shoud be the same for extends keyword.

Hopefully , you can understand me with my bad english.^^

Thank you very much!

I'd like to see autocompletion of HTML tags. There is only a finite number of tags so it can work without an API.

Pressing < in HTML mode would trigger the autocompletion dropdown.

Hi, this is an excellent feature - I would like to propose leveraging ctags, as it would give us access to a wealth of pre-existing code completion files, using something like jsctags would also allow us to build code completion 'on the fly' from the current file / directory structure.

See: https://github.com/mozilla/doctorjs

hey, autocomplete is a good feature but i want to focus on the speed of this feature...netbeans has incredibly slow auto-complete, it drives me out, i think if someone implements auto-complete it should be instant or should not be accepted

Any updates on an ETA for this feature?

I haven't had time to make any progress. No ETA on my part.

Here is another implementation that might inspire: http://shiftedit.net/tests/ace-autocomplete

+1 For this feature. Cloud9 has just pushed a good implementation.

@fjakobs and @zefhemel - any chance the awesome code completion widget in Cloud9 could be moved to Ace? This would make it possible to have code completion while editing github files.

I'm assuming this is it: ajaxorg/cloud9@09f2ada

That will not be so simple. The UI depends on APF, the UI toolkit we use to build Cloud9. The multi-file completion depends on C9's way of handling multiple files, ACE has no notion of files at all at this point. We will look at it.

@aslakhellsoy
Hello Aslak,

I have made some modifications to following implementation. http://shiftedit.net/tests/ace-autocomplete

source code can be found at: https://github.com/montoyaedu/ace/blob/master/experiments/javaeditor.htm

live example can be found at http://www.omtrek.com/~emontoya/editor/

autocomplete is not triggered automatically but only when requested (Ctrl-Shift-Space)

I hope you can find it useful.

Couldn't the Cloud9 implementation at least be abstracted to the popup (and its relative positioning) and populating the list? If there was nothing more than a popup you could call and put in whatever the heck you wanted based on the current word / prhase, that would do a lot. The hard part is probably positioning the autocomplete box and returning what's currently being typed. Filling with data is the easy part.

I'm considering adding a basic infrastructure for code completion to Ace. This will probably come with just a very basic or no UI but it will give people adding completions a way to hook in. Can't give an ETA though.

great news, thanks Fabian.

'Twould be sweet @fjakobs. ^_^

+1

Any progress on this?

What about this: is there anything in the API to support building an auto-complete system? Can I grab word boundaries? And then compare that to possible selection matches? Most of the code coloring expects a full word match, but it would be nice if we could grab partial word matches from keywords, or beginning-of-word matches.

In other words, ideally the code-coloring regex statements could be refactored or re-used in some way to identify auto-completion segments, rather than tacking on a whole other set of matches to compare that would look very similar to the code-coloring regexes. But, of course, we'd want to extend the library of matches beyond just the code-coloring list, and might want to do something other than simple text completion (helper text, inline evaluation, etc).

Just trying to put some ideas out there. If there's anything currently in progress or any ideas to make this possible, I'd love to know.

Take a look at my WPide project on github or install the Wordpress plugin on a Wordpress site.

It's got autocomplete of Wordpress functions and php functions. It also automatically gives you some basic function reference with links through to the Wp codex or php site.

The code might not be pretty but it works!

@fjakobs did you ever get a chance to implement any of this?

@WPsites I checked your plugin out - definitely looks good. When I get into my ACE project I will look into it more deeply. Maybe we could collaborate on a more general solution for ACE?

Hi,

I´m quite new to javascript, but i´ve implemented simple code completion using ace editor api. Here is the gist:

https://gist.github.com/3789861

Help / Critics / Patchs are appreciated. Cheers from Brazil

NEED MOAR AUTOCOMPLETE

;-)

@avuori You can check out the branch at feature/codecomplete if you want to play around. Right now it draws the box, populates it, binds the keys properly ( e.g. Up/Down to navigate, Tab/Enter to select), and replaces text.

Really, @aslakhellesoy should be commended for all this thought and work he put into this two years ago. All I have so far is a rework of his code to fit into the current Ace model.

My next course of action will be to populate/filter the list intelligently. It looks like it'll be easier to provide a blank list (modifiable via the API) as people are asking, rather than do a text parse at first go.

@gjtorikian Thanks, that's useful to me already.

So I ended up dropping Aslak's implementation and cherry-picked a commit Harutyun had done which provides much better integration with Ace. After some tweaking and blatant copying from the Cloud9 autocompletion logic it's working rather nicely within a web worker:

http://screencast.com/t/mN7mVJ9G14U
http://screencast.com/t/muz9qfubFt

There are still some UI tweaks to do. Remaining nice to haves include fuzzy filtering and language-specific keyword inclusion. The code is also somewhat of a mess

This doesn't have a high probability of seeing the light of day at the moment. The entire completion logic is taken from Cloud9. Given that C9 is GPL and Ace is BSD, I am not a lawyer and have no idea on if the two are even compatible. On top of which, as I said, all the C9 code was written by @zefhemel and @lennartcl so I assume their permissions would be necessary (and above all, polite to ask for).

Something to think about over the holidays! 🎅

Autocompletion for keywords per language is working: http://screencast.com/t/7gUZwdyCcbEe

Unfortunately this will also need to work for keywords asembled via giant regexp, and that's probably harder to do.

@gjtorikian,
Tell me please, autocompletion is available for all languages​​?
Where can I find a description of the process of adding words to autocompletion?

"For all languages" is not quite accurate. It depends entirely on the keyword generation used by the language's syntax highlighter.

Take, for example, CSS: https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/css_highlight_rules.js#L40-44

The autocompletion, when in CSS mode, incorporates these tokens as potential autocompletion matches. So when you type "ani" it sees that CSS also has keywords beginning with "ani" and adds them to the dropdown, along with any "ani" tokens in your document. Therefore, "adding words to autocompletion" is no different than making sure the highlighter supports the word already.

However, some of the time, Ace also uses giant regexp matches, as seen above, which also accounts for keyword construction. So it will need to work to match those, too.

Ok, I consider the usability of this about 90% finished.

@nightwing I'd like your advice / help on a few things:

• I added the feature to rerun a search on backspace; I want to do the same thing on text input: http://screencast.com/t/RtbmZAMii
  What's the best way to do that? Listen to keydown ?
• Also seen in the video (and discussed above), I can get a list of keywords for any language, basically, whatever is returned from createKeywordMapper. What I really want to do next is to ascertain keywords from the giant regexp blobs. To do this, I want to split based on matching values: https://github.com/ajaxorg/ace/blob/feature/codecomplete/lib/ace/edit_session.js#L945-L948
  Basically, if the token array has some matched keyword, I should be able to split the state regex and grab the right regexp grouping. Is there something in tokenizer that does this? I couldn't find it. Or maybe this method is non-performant and sucks.

Other than these things I am pretty happy with what's working so far. If I can get at least the first one working I'll make the PR.

I'm currently hooking into the onchange event for text composition.
The main issue I've had is working out the context. I'm mostly using regexes to achieve this but surely it's better to make use of the tokeniser. I haven't found a way to query the tokeniser for what the next input will be for a given range. e.g. col:10, row:2 = css-property-name.

Also where is createKeywordMapper?

1 in acebug i used selectionChange event so that moving cursor with arrows was changing filtering too

I added the feature to rerun a search on backspace;

i thought to use FilteredList for this. get all completions at first and change it's filtered after each keypress.

2 maybe we should drop giant regexps altogther? they seem to take more memory than an object

The main issue I've had is working out the context.

that was the main issue for acebug too, currently token names are a mess from textmate scope names and classnames highlighted by themes, i think token.type should give `language(js|css|etc..).sublanguage?(string|regex|comment|).token(keyword|variable|escape|something else mode specific)
themes must provide fixed set of styles and modes will provide a map from token names to theme styles

Also where is createKeywordMapper?

https://github.com/ajaxorg/ace/blob/feature/codecomplete/lib/ace/mode/text_highlight_rules.js#L99

i thought to use FilteredList for this. get all completions at first and change it's filtered after each keypress.

I don't know how this will work for deletions. See this video: http://screencast.com/t/kwiobXzuYR . nct gets the doc and keyword completion for nct, but nc needs to do more work to get a new list.

maybe we should drop giant regexps altogther? they seem to take more memory than an object

Yeah, I have taken them out now. It's too much of a hassle to deal with and it sounds like there will be a refactor of the highlighters coming up.

I will implement text input filtering and then open a PR. I also think emmet integration is good but should be done at some other point.

I pulled down your branch and built it, but I'm getting this JS error on line 12689 of ace.js:

Uncaught TypeError: Object function (module, callback) {
            return _require(moduleName, module, callback);
        } has no method 'toUrl'

Here's my setup:

    var editor = ace.edit("codeEditor");
    editor.renderer.setShowPrintMargin(false);
    editor.renderer.setShowInvisibles(false);
    editor.renderer.setDisplayIndentGuides(false);
    editor.getSession().setUseWrapMode(true);
    editor.getSession().setFoldStyle("manual");
    editor.getSession().setUseWorker(false);
    editor.setTheme("ace/theme/twilight");

Something on my end?

Basic support for autocompletion was added recently, Thanks to Garen. Remaining problems with it are tracked in #1470.