Web based code editor with auto completion

Question

guys

I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.

I'm using ACE editor.

This is what I get while trying with autocompletion.

I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.

What I want is this.

In this pic as you can see I'm getting suggetion related to os package only.

Answer 1

Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.

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

Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html

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

Answer 2

HTML, JS, CSS Based

1. Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
2. Create <script> </script>
3. Build the autocomplete
4. Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...

E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.

I know, this is only an plan how to do is.