ComboBox AND Grid Combobox autocomplete (compressed)

No... I'm not uncompressing it. It's 4:05 and I've been up more days than I care... <grumble> This works with the default V2.01 with no modifications.

First, here's a regular combobox with the "onkeyup" handler calling the autoCompleteCombo function. <no sleep in 42 hours> Simple example, custom width on the popup to accomodate the long names in my Manufacturers_List_Arr array.

var Input_ItemInfo_Manufacturer = new AW.UI.Combo;
Input_ItemInfo_Manufacturer.setId("Input_ItemInfo_Manufacturer");
Input_ItemInfo_Manufacturer.setEvent("onkeyup", autoCompleteCombo);
Input_ItemInfo_Manufacturer.setItemText(Manufacturers_List_Arr);
Input_ItemInfo_Manufacturer.setItemCount(Manufacturers_List_Arr.length);
Input_ItemInfo_Manufacturer.getPopupTemplate().setStyle("width","295px");
document.write(Input_ItemInfo_Manufacturer);

Second here's an example of a grid with a combobox template being used with the same thing. Again, pretty simple, <sleeping at keyboard> I just included the basics.

var BASE_UNITS_LIST = new AW.UI.List;
//BASE_UNITS_LIST_ARR is defined elsewhere, but it's a 1D array
BASE_UNITS_LIST.setItemText(BASE_UNITS_LIST_ARR);
BASE_UNITS_LIST.setItemCount(BASE_UNITS_LIST_ARR.length);

var Grid_Items_Items = new AW.UI.Grid;
Grid_Items_Items.setId("Grid_Items_Items");
Grid_Items_Items.setHeaderText(Headings_Items_Items);
Grid_Items_Items.setColumnCount(Headings_Items_Items.length);
Grid_Items_Items.setCellEditable(true);
Grid_Items_Items.setCellTemplate(new AW.Templates.Checkbox,11);
Grid_Items_Items.setHeaderTooltip("Taxable",11);
Grid_Items_Items.setCellTemplate(new AW.Templates.Combo,3);
Grid_Items_Items.getCellTemplate(3).setEvent("onkeyup",autoCompleteCombo);
Grid_Items_Items.setPopupTemplate(BASE_UNITS_LIST,3);
Grid_Items_Items.getPopupTemplate(3).setStyle("width", "40px");

And now for the working autocomplete box... enjoy. It took me mucho hours. <snoring>

function autoCompleteCombo(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 list;if(typeof(this.getItemCount)=='undefined'){list=this.getPopupTemplate();}else{list=this;}var tbox=this.getContent("box/text").element();var tboxValue=tbox.value;var i;var found=false;for(i=0;i<list.getItemCount();i++){if(list.getItemText(i).toUpperCase().indexOf(tboxValue.toUpperCase())==0){found=true;break;}}var iLen = tbox.value.length;if(found){tbox.value = list.getItemText(i);list.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();}return;};

Cheers, John

PS... sorry it is all on one line... makes it hard to read but then again... really compact.

Anyhow, Feel free to "uncompress" it shorten variable names, or completly rewrite it... BUT SEND ME A COPY! I love AW and so I want to get my autocomplete to be working well in FF and IE (tested extensively in FF and somewhat in IE)

So again, sorry it looks awful, but I hope you get the point and perhaps some good use out of it.

Oh darnit... see I need to sleep so I don't forget stuff...

IF you don't mind values that don't match the drop-down values, then remove the tbox.value = ''; statement when the found is false (right in the middle of the selection/range stuff) Then it will let you keep typing and accept other values.

Personally I think a combo box can be BOTH a speedy-drop-down or a true combo value box.

Again, Merry Christmas to all and to all a GOOD NIGHT!

John - Thanks for the hard work. Great functionality!

Not working for me...

after these 2 lines
var tbox = this.getContent("box/text").element();
    var tboxValue = tbox.value;
tbox.value is still 'undefined'...

Any thoughts?

Here is the function, expanded for everyone, by the way

function autoCompleteCombo(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 list;

    if(typeof(this.getItemCount) == 'undefined')
    {
        list = this.getPopupTemplate();
    }
    else
    {
        list = this;
    }
    
    var tbox = this.getContent("box/text").element();
    var tboxValue = tbox.value;
    
    alert(tbox.value);
    
    var i;
    var found = false;
    for(i = 0; i < list.getItemCount(); i++)
    {
        if(list.getItemText(i).toUpperCase().indexOf(tboxValue.toUpperCase()) == 0)
        {
            found = true;
            break;
        }
    }
    
    var iLen = tbox.value.length;
    if(found)
    {
        tbox.value = list.getItemText(i);
        list.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();
    }
    
    return;
};

Oh crap I left an alert in that one

I wouldn't be a coder if I actually proofread >.<

function autoCompleteCombo(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 list;

    if(typeof(this.getItemCount) == 'undefined')
    {
        list = this.getPopupTemplate();
    }
    else
    {
        list = this;
    }
    
    var tbox = this.getContent("box/text").element();
    var tboxValue = tbox.value;
    
    var i;
    var found = false;
    for(i = 0; i < list.getItemCount(); i++)
    {
        if(list.getItemText(i).toUpperCase().indexOf(tboxValue.toUpperCase()) == 0)
        {
            found = true;
            break;
        }
    }
    
    var iLen = tbox.value.length;
    if(found)
    {
        tbox.value = list.getItemText(i);
        list.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();
    }
    
    return;
};

It works great with combo, but not when combo is in Grid.
the error in IE is 'undefined' is null or not an object

pleaaaaaase help!!!

why does method autoCompleteCombo not work when using combobox template in grid