CODEWITHSUNDEEP
autocompleteace-editor
Willy
Willy

Reputation: 1838

Ace Editor Autocomplete - two steps autocomplete

I am trying to make Ace Editor support autocomplete for my own query language.

The query itself is something like below

city:newyork color:red color:blue

In above case, I expect the user can see 'city' and 'color' when typing 'c'. And after he selects 'color', he can directly see the two options 'red' and 'blue' in the suggestions list.

I checked all arguments of getCompletions: function(editor, session, pos, prefix, callback). But still cannot figure out the better way to do this. Any suggestion will be appreciated.

Upvotes: 3

Views: 1645

Answers (1)

Ram Jadhav
Ram Jadhav

Reputation: 99

It's not possible directly or through ace editors default auto complete. But I have sample code which may full fill your requirement. Step-1: You have to create editor object and set options: 

ace.require("ace/ext/language_tools");
    var editor = ace.edit('div_id');
    editor.setTheme("ace/theme/textmate");
    editor.getSession().setMode("ace/mode/yaml");
    editor.getSession().setTabSize(4);
    editor.getSession().setUseSoftTabs(true);
    editor.setDisplayIndentGuides(true);
    editor.setShowInvisibles(true);
    editor.setShowPrintMargin(false);
    editor.setOption("vScrollBarAlwaysVisible", true);
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true
    });


var EditorWordCompleter = {
    getCompletions: function(editor, session, pos, prefix, callback) {
        getWordList(editor, session, pos, prefix, callback);
        }
    }

var getWordList = function(editor, session, pos, prefix, callback) {
    var wordList = [];
    if(prefix === 'T') {
        wordList.push('List of tasks');
    } 
    wordList = $.unique(wordList);
    callback(null, wordList.map(function(word) {
        return {
            caption: word,
            value: word
        };
    }));
}

Please change it as per you're requirements.

Upvotes: 1

Related Questions