javascript - How to trigger autocomplete dynamically with ace editor: input commands and complete options - Stack Overflow

admin管理员组

文章数量:1026989

1. I know how to use ace editor in web page
2. I know how to add a pleter

I want to do like this, input a mand, a blank space, then press - (dash), let ace editor autoplete options(parameters), what should I do?

For example, here is a mand Print with options -a|-b|-c|-d, when I input Print -, how can trigger autoplete, and let you select -a or -b or -c or -d?

1. I know how to use ace editor in web page
2. I know how to add a pleter

I want to do like this, input a mand, a blank space, then press - (dash), let ace editor autoplete options(parameters), what should I do?

For example, here is a mand Print with options -a|-b|-c|-d, when I input Print -, how can trigger autoplete, and let you select -a or -b or -c or -d?

• javascript
• autoplete
• editor
• ace-editor

Share Improve this question Follow edited Oct 8, 2016 at 16:41 Łukasz 8,68322 gold badges3131 silver badges5151 bronze badges asked Sep 16, 2015 at 9:57 wwjwwj 14144 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I solve it by myself. code as follows:

var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("stepEditor");
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/tcl");
    editor.setOptions({
        enableBasicAutopletion: true,
        enableSnippets: false,
        enableLiveAutopletion: true
    });
    var wordList = [];
    var icc2Commands = null;
    jQuery.getJSON("auto_pletion.json",function(obj){  
        icc2Commands = obj;
        for(var name in obj){         
            wordList.push(name);    
        }    
        for(var i = 0; i < 5; i++)
        {
            console.log(wordList[i]);
        }
    }); 
    var icc2Completer = {
        getCompletions: function(editor, session, pos, prefix, callback) {
            var curLine = session.getDocument().getLine(pos.row);
            var curTokens = curLine.slice(0, pos.column).split(/\s+/);
            var curCmd = curTokens[0];
            if (!curCmd) return;
            var lastToken = curTokens[curTokens.length-1];
            var candidates = [];
            if (lastToken && lastToken.match(/^-/)) {
              for (var option of icc2Commands[curCmd]) {
                if (option.startsWith(lastToken.slice(1))) {
                  candidates.push("-"+option);
                }
              }
              callback(null, candidates.map(function(ea) {
                return {name: ea, value: ea, score: 300, meta: "ICC2Option"};
              }));
            } 
            else{
                callback(null, wordList.map(function(word) {
                    return {
                        caption: word,
                        value: word,
                        meta: "ICC2Command"
                    };
                }));
            }
        }
    }
    langTools.addCompleter(icc2Completer);

enableLiveAutopletion seems to work in many cases, but I found out that for some reason it does not show the popup if you type a word, followed by a space and then another word. What worked for me was calling:

sourceEditor.execCommand('startAutoplete');

This is the programmatic way of triggering the ctrl+space action which seems to show popup in some cases that are not covered by enableLiveAutopletion.

1. I know how to use ace editor in web page
2. I know how to add a pleter

I want to do like this, input a mand, a blank space, then press - (dash), let ace editor autoplete options(parameters), what should I do?

For example, here is a mand Print with options -a|-b|-c|-d, when I input Print -, how can trigger autoplete, and let you select -a or -b or -c or -d?

1. I know how to use ace editor in web page
2. I know how to add a pleter

I want to do like this, input a mand, a blank space, then press - (dash), let ace editor autoplete options(parameters), what should I do?

For example, here is a mand Print with options -a|-b|-c|-d, when I input Print -, how can trigger autoplete, and let you select -a or -b or -c or -d?

• javascript
• autoplete
• editor
• ace-editor

Share Improve this question Follow edited Oct 8, 2016 at 16:41 Łukasz 8,68322 gold badges3131 silver badges5151 bronze badges asked Sep 16, 2015 at 9:57 wwjwwj 14144 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I solve it by myself. code as follows:

var langTools = ace.require("ace/ext/language_tools");
    var editor = ace.edit("stepEditor");
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/tcl");
    editor.setOptions({
        enableBasicAutopletion: true,
        enableSnippets: false,
        enableLiveAutopletion: true
    });
    var wordList = [];
    var icc2Commands = null;
    jQuery.getJSON("auto_pletion.json",function(obj){  
        icc2Commands = obj;
        for(var name in obj){         
            wordList.push(name);    
        }    
        for(var i = 0; i < 5; i++)
        {
            console.log(wordList[i]);
        }
    }); 
    var icc2Completer = {
        getCompletions: function(editor, session, pos, prefix, callback) {
            var curLine = session.getDocument().getLine(pos.row);
            var curTokens = curLine.slice(0, pos.column).split(/\s+/);
            var curCmd = curTokens[0];
            if (!curCmd) return;
            var lastToken = curTokens[curTokens.length-1];
            var candidates = [];
            if (lastToken && lastToken.match(/^-/)) {
              for (var option of icc2Commands[curCmd]) {
                if (option.startsWith(lastToken.slice(1))) {
                  candidates.push("-"+option);
                }
              }
              callback(null, candidates.map(function(ea) {
                return {name: ea, value: ea, score: 300, meta: "ICC2Option"};
              }));
            } 
            else{
                callback(null, wordList.map(function(word) {
                    return {
                        caption: word,
                        value: word,
                        meta: "ICC2Command"
                    };
                }));
            }
        }
    }
    langTools.addCompleter(icc2Completer);

enableLiveAutopletion seems to work in many cases, but I found out that for some reason it does not show the popup if you type a word, followed by a space and then another word. What worked for me was calling:

sourceEditor.execCommand('startAutoplete');

This is the programmatic way of triggering the ctrl+space action which seems to show popup in some cases that are not covered by enableLiveAutopletion.

本文标签：