Autocompletion in ACE editor

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>

enter image description here

Info source

See also this and this answers


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.


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>

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

Tags:

Javascript

Html

Autocomplete

Syntax Highlighting

Ace Editor

Recent Posts