-
-
Notifications
You must be signed in to change notification settings - Fork 570
Tab completion
Tab completion is another useful feature of jQuery Terminal. By default, if you press <TAB>
, it will be inserted into the terminal (even though it will be replaced by 4 spaces, it will still be treated as one character).
To change the default behavior, you need to use the completion option.
It you have an object as first argument (interpreter) or a JSON-RPC string with system.describe
$('#terminal').terminal({
open: function() {
},
close: function() {
},
'open-foo': function() {
}
}, {
completion: true
});
If you type op
and press <TAB>
, it will insert open
then if you press <TAB>
a second time, it will list open
and open-foo
.
The second possibility is if you use a function as first argument (interpreter), then you can use an array:
$('#terminal').terminal(function(command) {
}, {
completion: ['pwd', 'pwdhash', 'pwdhash-bin', 'pwdx']
});
If you need logic in the completion process: say for instance you have the command git
and want to complete it into git clone
and git checkout
, you can use this:
$('#terminal').terminal(function(command) {
}, {
completion: function(string, callback) {
if (this.get_command().match(/^git /)) {
callback(['checkout', 'clone', 'pull', 'push', 'commit']);
} else {
callback(['ls', 'cat', 'git']);
}
}
});
Additionally, you can return a promise from completion; you can use Promise.resolve()
, but what is more useful is if you make the completion on the server:
$('body').terminal(function(command) {
}, {
completion: function(string, callback) {
return fetch('completion.py', {string, command: this.get_command()}).then(res => res.json());
}
});
You can use menu_autocomplete extension. Include a file:
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/autocomplete_menu.js"></script>
and you can use option: autocompleteMenu: true,
see this Demo how it works. type get
to see the menu.
History hints are another type of completion visible in some shells. here is a PoC demo using this type of completion.
To see it in action type:
git commit -am 'this is commit'
and then in new command type just git
it should show hint of last command that have same prefix.
if you want to complete part of the word or have different separators like parenthesis. There is a way when you can use full command and return full command as completion. To be able to show just the word you complete you can also change double tab to not show whole commands.
This is example from LIPS - Scheme based lisp:
$('body').terminal(function(command) {
}, {
completionEscape: false,
wordAutocomplete: false,
doubleTab: function(string, maches, echo_command) {
echo_command();
this.echo(maches.map(command => {
return lips.tokenize(command).pop();
}));
},
completion: function(string) {
let tokens = lips.tokenize(this.before_cursor(), true);
tokens = tokens.map(token => token.token);
// Array.from is need to for jQuery terminal version <2.5.0
// when terminal is outside iframe and lips is inside
// jQuery Terminal was using instanceof that don't work between iframes
if (!tokens.length) {
return Array.from(env.get('env').apply(env).toArray());
}
const last = tokens.pop();
if (last.trim().length) {
const globals = Object.getOwnPropertyNames(window);
const prefix = tokens.join('');
const re = new RegExp('^' + jQuery.terminal.escape_regex(last));
var commands = env.get('env').apply(env).toArray().concat(globals).filter(name => {
return re.test(name);
}).map(name => prefix + name);
return Array.from(commands);
}
}
});
You can test it in previous link, when you type (let ((x 10)) (dis
and if you press tab it will complete display
. And if you type (begin (string
and press double tab it will give you all function names that start with "string".
Library for Web-Based Terminal in JavaScript, (jQuery Terminal: git repo)
Copyright (c) 2011-2023 Jakub T. Jankiewicz