AutoComplete

Tab autocompletion saves a lot of time. It enables the user to type less of what they need thereby being not only interactive but also productive.

How does it work?

The user inputs data in the terminal and presses the Enter key, the input is saved in an internal history stack (accessible as an array). When the user types a partial string of an already input string, then presses the Tab key, you can loop through the history array for matches and set the most recent one as the input value iteratively.

TIP

In addition to that, you can also include an external list of strings to use when matching.

Implementation

To implement the above methodology, you need the term.history which provide an copy of the entries.

Create and add the basic autocomplete function using term.setCompleter().

const matches = [];

term.setCompleter(str => {
    if (!matches.length) {
        matches.push(
            ...term.history.filter(c => c.startsWith(str))
        );
    }
    return matches.pop();
});

The matches array is dynamic as it only keeps strings that start with the partial string str. The value on top of the stack, matches, is retrieved one at a time until it is empty thereby generating a new list of matched strings.

At this point, typing a few inputs, followed by the Enter key appends the input to our history stack. Typing a partial, followed by the Tab key, should do the job.

Illustration

Take the following log as a sample, we can test the tab autocompletion after typing a partial h

Result:

My First Terminal

[user] $ help
help
[user] $ hack
hack
[user] $ ls
ls
[user] $ history
history
[user] $ h▊

Press Tab key just once sets the input value to history. Then hack after another hit, and finally help. Deleting two characters from the input string help leaves he, pressing the Tab key once more only moves on cycle to help.