Combobox auto-complete: Arrow Keys do not work properly

[vtmoren]

I have an existing txet field which I want to add an auto-complete feature to in my jsp:
<input id="text" name="text" class="classText" type="text" onfocus="Filter.setFilterType('filter');" onkeyup="Filter.displayData();"/>

This code appears within my displayData function:

Ext.namespace('Ext.filterData');

Ext.filterData.data = displayData;
var filterStore = new Ext.data.SimpleStore({
fields: ['data'],
data: Ext.filterData.data
});

var filterText = new Ext.form.ComboBox({
store: filterStore,
displayField: 'data',
tpl: '<div class="filtertextsize">{data}</div>',
fieldClass: 'filtertextsize',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
hideTrigger: true,
selectOnFocus : false,
maxHeight: 150,
shadow: false,
forceSelection: false,
width: 169
})

filterText.applyTo(transform);

filterText.focus();

The text field now has auto-complete functionality, but the arrow keys do not seem to work:
Left and right do not move the cursor.
Up and down do not move up or down the drop-down list...

Also as each key is typed into the textfield the shadow keeps getting darker and darker (which is not as critical because I removed it)

Any ideas why the arrow keys do nto function?
Do I need to define them using the specialKeys event?
I fifugred this functionality was already incorporated into the Ext.form.Combobox object...

Any responses would be greatly appreciated...

-VM

[vtmoren]

In the following line:

filterText.applyTo(transform);

transform represents a string variable of the current textfield element.

Any ideas?

-VM

[mthad]

did u find any solution for how to work on keyboard arrow keys? please let me know.

[bkraut]

I use next configuration for ComboBox and it works perfect:

new Ext.form.ComboBox({
                       allowBlank: false,
                       name: 'anType',
                    store: dsCombo,
                    tabIndex: 6,
                       displayField: 'acName',
                       typeAhead: true,
                       valueField: 'anType',
                       emptyText: 'Empty text ...',
                       editable:true,
                       selectOnFocus:true,
                       mode: 'local',
                    triggerAction: 'all',
                    forceSelection: true,
                    allowBlank: false,
                    width:155
               }); 

[mthad]

Sorry!! it is not clear to me. What do you mean by "next configuration"? here is my combobox config:

     var productSearch = new Ext.form.ComboBox({
         store:  CommonproductStore ,
         id:'productCombo',
         displayField:'product',        
         valueField: 'productNCID',
         pageSize: PageSize,       
         width: 575,        
         valiateonBlur:false,
         typeAhead: true,
         mode: 'remote',
         triggerAction: 'all',
         emptyText:productText,
         selectOnFocus:true,
         hiddenId:'productNCID',
         hiddenName: 'productNCID',
         applyTo: 'product',
         editable:true,
         minChars: 2,
         tpl: '<font color="black"><tpl for="."><div class="x-combo-list-item">{product}</div></tpl></font>',        
         hideTrigger:false,
         style: 'color: black;'
      });