Autocompletion in ACE editor

Question

I've found simmilar question: Ace Editor autocomplete and multiple languages

But the responses were that autocompletion is not supported by ACE, and according to Google group for Ace Editor "It is on my wishlish for Ace and we definitively need it for Cloud9".

This post is one year old and as you can see, the cloud9 supports autocompletion now: https://c9.io/site/features/

So is autocompletion available in Ace Editor by default? I cannot find any information about it.

Related question: [How to add my own completer in ace editor](https://stackoverflow.com/questions/44276794/how-to-add-my-own-completer-in-ace-editor) — Klesun, Dec 09 '20 at 15:36

score 58 · Accepted Answer · answered Nov 01 '13 at 15:59

58

Autocomplete is now an official part of the API. Enabling it takes 3 lines of code:

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

Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page:

<script src="ace/ext-language_tools.js"></script>

You can find a demo at https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

And here's the wiki page I just wrote on the topic:

https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

answered Nov 01 '13 at 15:59

hwjp

15,359
7
71
70

1

this is very good, but just a quick question, where is the rest of the documentation ? i want to write some snippets for latex and im stuck, how would i write snippets for something like \begin{... which can have 10 different things after it? see the possibilities here: https://github.com/mercutiodesign/texmaker-3.3.3/blob/master/completion/completion.txt – mike Mar 16 '14 at 23:55
5

I can't believe there is no better documentation for this on the official site... thanks a lot, I searched really long until I found your answer – moeTi Mar 27 '14 at 14:51
The `setOptions()` method didn't work for me. I had to use, `editor.setOption("enableBasicAutocompletion", true);`. FYI I'm using it in an application wrapper with proxy objects so there may be something lost in translation. – 1.21 gigawatts Jul 31 '15 at 14:43
@mike see [my answer](https://stackoverflow.com/a/65219943/2750743) below - you can pass object implementing `getCompletions()` instead of boolean in `enableBasicAutocompletion`. – Klesun Dec 09 '20 at 17:31

maudulus · Answer 2 · 2015-01-07T21:25:10.487

Since Autocomplete is now a part of the ACE api:

1) Include ace.js at the top of your html:

  <script type="text/javascript" src="js/ace.js"></script>

2) Also include your mode (language type):

  <script type="text/javascript" src="js/mode-yaml.js"></script>

3) Also include your theme:

  <script type="text/javascript" src="js/theme-monokai.js"></script>

4) Also include ex-language_tools.js:

  <script src="js/ext-language_tools.js"></script>

5) Add your div with id editor (this will become your IDE):

  <div id="editor"></div>

6) Include the following script (see my comments to understand them) :

  <script>
    var langTools = ace.require("ace/ext/language_tools");

Line below transforms your div with id="editor" into the editor

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

Line below sets the color theme. Other themes available here...try them here

editor.setTheme("ace/theme/monokai");

Line below sets the mode based on programming language...other modes here:

editor.getSession().setMode("ace/mode/yaml");


    editor.setShowPrintMargin(false);

Lines below turns ON autocompletion in real-time.

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
});

Thus, the whole thing could be broken down into the following:

<!DOCTYPE html>
<html>
<head>
  <title>IDE AUTOCOMPLETE</title>
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css">
  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/ace.js"></script>
  <script type="text/javascript" src="js/mode-yaml.js"></script>
  <script type="text/javascript" src="js/theme-monokai.js"></script>
  <script src="js/ext-language_tools.js"></script>
</head>
<body>
  <!-- EDITOR SECTION BELOW! -->
  <div id="editor"></div>
  <script>
    var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/yaml");
    editor.setShowPrintMargin(false);
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: false
    });
  </script>
  <!-- EDITOR SECTION ABOVE -->
</body>
</html>

Thanks. I had to call `setOption()` rather than `setOptions({enableBasicAutocompletion: true})`. I used editor.getOptions() and editor.getOption("enableBasicAutocompletion") to check that the value was actually set and it all worked with `editor.setOption("enableBasicAutocompletion", true);` — 1.21 gigawatts, Jul 31 '15 at 14:59
This worked for me as of July 26, 2018 with Ace v1.3.3. `enableLiveAutocompletion: false` makes it necessary to hit Ctrl + Space to show suggestions. `enableLiveAutocompletion: true` shows suggestions after typing some letters. Also not all the modes have suggestions: for instance, `html` has, while `pascal` does not have. — Antônio Medeiros, Jul 26 '18 at 15:15

Klesun · Answer 3 · 2021-02-25T12:06:21.760

Note, to implement custom completion logic, you can pass a completion provider object in enableBasicAutocompletion.

See jsfiddle

<!-- integrity removed for example sake -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>

<script>
const editor = ace.edit('some-ace-editor-holder-div-id');
editor.setOptions({
  enableBasicAutocompletion: [{
    getCompletions: (editor, session, pos, prefix, callback) => {
      // note, won't fire if caret is at a word that does not have these letters
      callback(null, [
        {value: 'hello', score: 1, meta: 'some comment'},
        {value: 'world', score: 2, meta: 'some other comment'},
      ]);
    },
  }],
  // to make popup appear automatically, without explicit _ctrl+space_
  enableLiveAutocompletion: true,
});
</script>

Info source

See also this and this answers

score 10 · Answer 4 · edited May 03 '13 at 08:30

10

Autocompletion is still not available natively for Ace, however we have implemented a component doing that for the Codiad IDE which is based on Ace and fully open source. You can check the code on Github, it will surely help you to write your own.

edited May 03 '13 at 08:30

Pop Catalin

61,751
23
87
115

answered Jan 10 '13 at 18:31

Flolagale

1,300
11
7

I can see some great piece of work over there. I've had a look into your `init.js` file. Could you please help me as to *how* this thing is integrated into Ace? Where/How is it being loaded? – Dr.Kameleon Feb 22 '13 at 07:22
2

It is not integrated _into_ Ace as such, see it more like a component that we add on top of it. We intercept the keyboard shortcut (Ctrl+Space) and open a popup that we fill with suggestions. We use the Ace api to get the text from the document to build the suggestions and to eventually insert the suggestion text. Have a look at the 'keybindings' component, it might help a bit. – Flolagale Feb 22 '13 at 15:26
Thanks a lot for the suggestions! I'll definitely have a look into it. :-) – Dr.Kameleon Feb 22 '13 at 17:16
Note, this statement is not true anymore. Ace does provide completion functionality nowadays with `language_tools` extension enabled through [`enableBasicAutocompletion`](https://github.com/securingsincity/react-ace/issues/69#issuecomment-354134011) option. – Klesun Feb 25 '21 at 12:08

score 5 · Answer 5 · edited Feb 25 '21 at 12:11

5

Make sure to have following imports

require('ace/ext/language_tools');

Use under snippet as required

editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

edited Feb 25 '21 at 12:11

Klesun

12,280
5
59
52

answered Nov 15 '16 at 07:26

Dhruv Pal

849
2
10
25

1

Why do you need multi_select? – James Douglas Apr 06 '20 at 20:21
@Jamessaystrytopanswers.xyz I don't remeber exactly, but I think you are right we dont need multi_select. I guess I copied it too while pasting answer – Dhruv Pal Apr 07 '20 at 08:07

score 3 · Answer 6 · answered Jun 04 '13 at 17:12

AjaxOrg has pushed a commit in their Cloud9 repository with the following message:

Code completion plug-in

I assume that this would be the answer to this question.

Here is the commit.

Also, I think that this is a good project that can help us.

For more information, we can follow the message from this issue opened in Cloud9 repository.

Inferpse · Answer 7 · 2012-11-24T22:14:41.173

0

Currently it's not available in any form. According to this issue: https://github.com/ajaxorg/ace/issues/1031

Autocomplete is only available in Cloud9 IDE (which is based on ACE) and may be available later as a separate plugin for ACE Editor.

edited Nov 24 '12 at 22:14

answered Nov 24 '12 at 21:46

Inferpse

4,135
1
31
39

Could you please tell me additional 2 things: Is not cloud9 open source (or some of its functionality is not open source?) and not to create separate question - if you know - what library is the cloud9 gui written in ? – Wojciech Danilo Nov 25 '12 at 22:31
1) Yes, some functionality isn't open source 2) They're using own framework for UI - http://ui.ajax.org/ – Inferpse Nov 26 '12 at 09:51
The gherkin editor based on Ace seems to have it. https://github.com/cucumber/gherkin-editor/blob/master/public/js/gherkin-editor/autocomplete.js – Will Sargent Dec 13 '12 at 21:31
Yep, but this haven't updated for a long time and I'm not sure it's compatible with current ACE version. And this is just basic autocomplete **engine** for ACE - so you'll have to write autocompletion options for each language to make it work. – Inferpse Dec 14 '12 at 10:14

score 0 · Answer 8 · answered Jul 22 '20 at 07:30

0

add this in your mounted:

this.aceEditor.setOptions({
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true
      })

answered Jul 22 '20 at 07:30

hntian

1

Please add some explanation about why these lines could help. – mate00 Jul 22 '20 at 07:52

Autocompletion in ACE editor

8 Answers8

Linked