JavaScript Answers

How to Add Autocompletion to ACE Editor?

Spread the love

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

For instance, we write:

<script src="" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="" integrity="sha512-ZxMbXDxB0Whct+zt+DeW/RZaBv33N5D7myNFtBGiqpDSFRLxn2CNp6An0A1zUAJU/+bl8CMVrwxwnFcpFi3yTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

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:

const editor = ace.edit("editor");
  enableBasicAutocompletion: true

to add the language tools extension with:


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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *