How to Add Autocompletion to ACE Editor?

To add autocompletion to ACE Editor, we can set the enableBasicAutocompletion option to true.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.min.js" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-javascript.min.js" integrity="sha512-ZxMbXDxB0Whct+zt+DeW/RZaBv33N5D7myNFtBGiqpDSFRLxn2CNp6An0A1zUAJU/+bl8CMVrwxwnFcpFi3yTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="editor" style='width: 300px; height: 100px'>
  const abc = 1;
</div>

to add the scripts for the Ace Editor and the language tools extension.

Also, we add the JavaScript mode script to enable JavaScript autocompletion.

Then we add a div with some starter code in it.

Next, we write:

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

to add the language tools extension with:

ace.require("ace/ext/language_tools");

Then we convert the div to an editor with:

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

The argument for edit is the ID of the element we want to convert to a code editor.

Next, we call setOptions with an object with the enableBasicAutocompletion set to true to enable basic JavaScript autocompletion.