Ace Editor Autocomplete - two steps autocomplete - autocomplete

Question

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.

Answer 1

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.