[SOLVED] How to show full autocomplete suggestions in JavaScript

How to show full autocomplete suggestions in JavaScript

The Ace editor demo shows how you can show autocomplete for JavaScript, like when writing document.querySelector.

I created the most simple demo using the latest version of ace on codepen since this shows you what I'm seeing in my app as well: I can't autocomplete or get a suggestion for things like document.querySelector or document.addEventListener which are some of the suggestions that do work fine in the ace tryout demo.

Here are two demo's for you to compare:

My demo is not suggesting what I need: https://codepen.io/goodbytes/pen/KwpGpEw?editors=1111
While the official demo does suggest what I need: https://mkslanc.github.io/ace-playground/#hello-world

Give it a try by trying to autocomplete document.querySelector

Solution

you need to use ace-linters to get smart autocompletion

<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js" crossorigin="anonymous"></script>

<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ext-language_tools.js" crossorigin="anonymous"></script>
<!-- load ace linters -->
<script src="https://cdn.jsdelivr.net/npm/ace-linters" crossorigin="anonymous"></script>


<div id='example' style="height: 80vh"></div>


<script>

var editor = ace.edit("example", {
    theme: "ace/theme/textmate",
    mode: "ace/mode/javascript",
    value: "console.log('Hello world');\n document.",
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
});

let provider = LanguageProvider.fromCdn("https://cdn.jsdelivr.net/npm/ace-linters/build");


provider.registerEditor(editor);
    
    
</script>