Firebug Autocomplete

HTML

<div id="cl"><span id="typed" contenteditable="true"></span><span id="remains"></span></div>
<div id="suggestList"></div>

Type commands from this list:<br/>
<ul>
    <li> - list.project</li>
    <li> - list.pages</li>
    <li> - open.project</li>
    <li> - open.page</li>
    <li> - open</li>
    <li> - open.view</li>
    <li> - next.page</li>
    <li> - prev.page</li>
</ul>

CSS

#cl {
    border: 1px solid #F1CA7F;
    font-family: monospace;
    font-size: 35px;
    height: 40px;
    bottom: 20px;
    left: 20px;
    position: fixed;
    right: 20px;
}

#typed {
    min-width: 100px;
    height: 100px;
    display: inline-block;
}

#remains {
    color: lightGray;
}

.highlighted {
    background-color: blue;
    color: white;
}

#suggestList {
    background-color: lightBlue;
    border: 1px solid gray;
    bottom: 63px;
    font-family: monospace;
    font-size: 35px;
    left: 20px;
    position: fixed;
}

#suggestList > div {
    padding: 2px 0;
}

JavaScript

var commands = ['list.project', 'list.pages', 'open.project', 'open.page', 'open', 'open.view', 'next.page', 'prev.page'];
var numCommands = commands.length;
var specialKeys = [8, 9, 13, 27, 32, 35, 36, 37, 38, 39, 40];
var remains, typed, key, slected, myprev, mynext, suggestList, shortest, thisChar, thisCommand;


$(document).ready(function() {
    $("#typed").focus();
    $("#typed").keydown(function(e) {
        key = e.keyCode;
        if (key == 190) key = 46;


        if (specialKeys.indexOf(key) !== -1) {

            switch (key) {

            case 38:
                // up
                selected = $('.highlighted');
                myprev = selected.prev();
                selected.removeClass('highlighted');
                myprev.addClass('highlighted');
                return false;
                break;

            case 40:
                // down
                selected = $('.highlighted');
                mynext = selected.next();
                selected.removeClass('highlighted');
                mynext.addClass('highlighted');
                return false;
                break;

            case 13:
                // Enter
            case 39:
                // right
                //
                var r = $("#remains").text();
                var t = $("#typed").text();
                if (r.length > 0) {
                    $("#typed").text(t + r);
                    $("#remains").text('');
                }
                return true;
                break;

            default:
                return true;

            }
            console.log(key);

        } else {

            suggestList = [];
            typed = $("#typed").text();
            $("#suggestList").html('');
            shortest = Array(201).join("i");
            thisChar = String.fromCharCode(key).toLowerCase();
            typed += thisChar;
            for (var i = 0; i < numCommands; i++) {

                thisCommand = commands[i];
                if...