jcubic / jquery.terminal

jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands
https://terminal.jcubic.pl
MIT License
3.12k stars 569 forks source link

autocompletion of commands from external json-source #705

Closed crackytsi closed 2 years ago

crackytsi commented 2 years ago

I have question related to jQuery Terminal

How can I apply auto-complete of commands, if the commands are in an external json file? I wrote something like https://stackoverflow.com/questions/48656165/get-php-data-using-jquery-terminal But setting "autocompleteMenu: true" seems not to have the expected effect.

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal@2.x.x/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal@2.x.x/css/jquery.terminal.min.css"/>
</head>
<body>
<h1>hallo</h1>
<div>
<script>
$.get('commands.json', function(commands) {
    $('body').terminal(function(command, term) {
         var cmd = $.terminal.parse_command(command)
        if (commands[cmd.name]) {
            this.echo(commands[cmd.name]);
        }
        $.post('script.php', {command: command}, function(response) {
           // response is already parsed by jQuery
           if (response.output) {
               term.echo(response.output);
           }
           // you can do other things with other values, like execute
           // terminal methods
           if (response.exec) {
               term[response.exec.method].apply(term, response.exec.args);
           }
        }, 'json');
    }, {
        autocompleteMenu: true,
        greetings: 'php example',
        onBlur: function() {
            return false;
        }
    });
});
</script>
</div>
</body>
</html>
jcubic commented 2 years ago

You need:

    }, {
        autocompleteMenu: true,
        completion: Object.keys(commands),
        greetings: 'php example'
    });

PS: you should not use onBlur: return false it was the first solution that prevent the terminal to work on mobile. Where did you find it? I need to remove it from every possible place.

crackytsi commented 2 years ago

@jcubic Thank you very much. Actually I retrieved it from mentioned URL and I just validated against (so it seems to make sense for me): https://terminal.jcubic.pl/api_reference.php onBlur [function(terminal)] — callback function called when terminal get out of focus. If you return false in this callback function the terminal will not get out of focus.

One last question regarding autocompletion topic: If I have parameters related to the commands e.g. in a structure like this:

{
    "command1": {
        "args": [
            {
                "name": "parameterA"
            },
            {
                "name": "parameterB"
            }
        ]
    },
    "command2": {
        "args": [
            {
                "name": "parameterC"
            },
            {
                "name": "parameterD"
            }
        ]
    }
}

How can autocompletion handle the parameters, depending on teh command? I tried to understand it from the docs, but this is something that seems to be not designed? So once a command is found, I would like to "change" the possible autocompletions for all parameters related to the command.

jcubic commented 2 years ago

You need to use the completion function where you parse the command in order to provide proper completion. Here is an example https://codepen.io/jcubic/pen/MJyYEx?editors=0010