Ace Code Editor auto completion not working

Question

I have a textarea that is turned into an ace code editor in browser. Basically it just mimics the textarea to a div then gets the value on submit.

Auto completion doesn't work. This is my script:

$(function () {
  $('textarea[data-editor]').each(function () {
    var textarea = $(this);
    var mode = textarea.data('editor');
    var editDiv = $('<div>', {
      position: 'absolute',
      height: textarea.height(),
      'class': textarea.attr('class')
    }).insertBefore(textarea);
    textarea.css('display', 'none');
    var editor = ace.edit(editDiv[0]);        
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode("ace/mode/" + mode);
    // enable autocompletion and snippets
    ace.require("ace/ext/language_tools");
    editor.setOptions({
        enableSnippets: true,
        enableBasicAutocompletion: true,
        enableEmmet: true
    });
        // editor.setTheme("ace/theme/idle_fingers");
        editor.getSession().setUseWorker(false);
        editor.session.setFoldStyle('manual');
        editor.setShowPrintMargin(false);
        // copy back to textarea on form submit...
        textarea.closest('form').submit(function () {
          textarea.val(editor.getSession().getValue());
        })
      });
});

If i remove everything inside $('textarea[data-editor]').each(function () { and just run

ace.require("ace/ext/language_tools");
    editor.setOptions({
        enableSnippets: true,
        enableBasicAutocompletion: true,
        enableEmmet: true
    });

it works fine. What am i doing wrong?

Answer 1

Probably you are setting wrong mode that doesn't have any completions. The version bellow works

 $(function() { $('textarea[data-editor]').each(function() { var textarea = $(this); var mode = textarea.data('editor'); var editDiv = $('<div>', { position: 'absolute', height: textarea.height(), 'class': textarea.attr('class') }).insertBefore(textarea); textarea.css('display', 'none'); var editor = ace.edit(editDiv[0]); editor.session.setValue(textarea.val()); editor.session.setMode("ace/mode/" + mode); // enable autocompletion and snippets ace.require("ace/ext/language_tools"); editor.setOptions({ enableSnippets: true, enableBasicAutocompletion: true, enableEmmet: true, useWorker: false, theme: "ace/theme/idle_fingers", showPrintMargin: false, showFoldWidgets: false }); // copy back to textarea on form submit... textarea.closest('form').submit(function() { textarea.val(editor.getSession().getValue()); }) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script> <script src="https://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script> <script src="https://ajaxorg.github.io/ace-builds/src/ext-emmet.js"></script> <form> <textarea data-editor='javascript' rows="10">{ }</textarea> <input type="submit" value="Submit"> </form>