Example: Combobox (Or list) Autocomplete - as you type

Took a while to find it, so i wanted to post it and I bet someone has lots of ideas on how make it faster, better, etc....

Input_ItemInfo_Units.setEvent("onkeyup", function(event){
    var key=String.fromCharCode(event.keyCode || event.charCode);
    switch (event.keyCode) {
        case 38:case 40:case 37:case 39:
        case 33:case 34:case 36:case 35:
        case 13:case 9:case 27:case 16:
        case 17:case 18:case 20:case 8:
        case 46:
            return;
            break;
    };
    var tbox = this.getContent("box/text").element();
    var tboxValue=tbox.value;
    var i;
    var found=false;
    for(i=0;i<this.getItemCount();i++){
        if(this.getItemText(i).toUpperCase().indexOf(
            tboxValue.toUpperCase()) == 0){
            found=true;
            break;
        }
    }
    var sText = event.charCode;
    var iStart = tbox.selectionStart;
    tbox.setSelectionRange(iStart+sText.length, iStart+sText.length);
    var iLen = tbox.value.length;
    if(found){
        tbox.value = this.getItemText(i);
        this.setCurrentItem(i);
    }else{
        tbox.value = '';
    }
    tbox.setSelectionRange(iLen, tbox.value.length);
    return;
});

(this is a second post for easier readability of the code above)

You'll notice I first filter out all sorts of charcodes so that the enter key, backspace key, etc. are all taken out of the equation.

Then, you'll see the variable tbox... this is the element for the textbox of the combobox.... it is the physicall item that the selection requires to work.

A quick note: i haven't thoroughly tested this on IE, but in Firefox it works. I'll post any changes once I look at IE.

... discuss.

Ok, I got it to work in IE6 and FF.... if you have a problem with it, then simply post a solution or a question... Alex is smarter than me and will probably get to it sooner than I.

Anyhow, here's the updated code to work in IE(at least 6) and FF.

Input_ItemInfo_Units.setEvent("onkeyup", function(event){
        var key=String.fromCharCode(event.keyCode || event.charCode);switch (event.keyCode) {case 38:case 40:case 37:case 39:case 33:case 34:case 36:case 35:case 13:case 9:case 27:case 16:case 17:case 18:case 20:case 8:case 46:return;break;};
        var tbox = this.getContent("box/text").element();
        var tboxValue=tbox.value;
        var i;
        var found=false;
        for(i=0;i<this.getItemCount();i++){
            if(this.getItemText(i).toUpperCase().indexOf(tboxValue.toUpperCase())==0){
                found=true;
                break;
            }
        }
        var iLen = tbox.value.length;
        if(found){
            tbox.value = this.getItemText(i);
            this.setCurrentItem(i);
        }else{
            tbox.value = '';
        }

        if(tbox.setSelectionRange) {
            tbox.setSelectionRange(iLen, tbox.value.length);
        } else {
            var oRange = tbox.createTextRange();
            oRange.moveStart("character", iLen);
            oRange.moveEnd("character", tbox.value.length-iLen);
            oRange.select();
        }
        tbox.focus();
        return;
    });

Since I also keep an array of the "legal" values, I can then have the following to make sure that a "bad" value wasn't typed in (simulating a drop-down box with autocomplete)

// .... on the Validating event....

    if(ItemInfo_Units.indexOf(text) < 0) {
        alert("Invalid Value");
        this.setCurrentItem(lastValue);
        return;
    } else {
        lastValue = ItemInfo_Units.indexOf(text);
        this.setCurrentItem(lastValue);
    }