Easyui Combox Keyboard Navigation Problem

[Alfred]

I want to combobox to to be selectable using Up Arrow and Down Arrow Keyboard key. But I don't want it to be editable. I used the Right Arrow key to show the panel because if I use Down Arrow key, it is not possible to select an item in the combobox:

Code:

<input type="text" class="easyui-combobox" name="oneCity" id="citi"
         data-options="url:'data/getcity.php',                     
         mode:'remote',
         valueField:'id',
         editable:false,
         textField:'cityName',
         filter: function (q, row) {
              return row.label.toLowerCase().indexOf(q.toLowerCase()) == 0;
         },
         selectOnNavigation:false,
         onLoadSuccess:function(){
             $('#citi').combobox('textbox').bind('keydown', function(e){
                   if(e.keyCode==39){           //Right Arrow key
                       $('#citi').combobox('showPanel');
                   }
                   var s = String.fromCharCode(e.keyCode);
                   var opts = $('#citi').combobox('options');
                   var data = $('#citi').combobox('getData');
                   for(var i=0; i<data.length; i++){
                        var item = data[i];
                   if (item[opts.textField].toLowerCase().indexOf(s.toLowerCase()) >= 0){
                        $('#citi').combobox('select', item[opts.valueField]);
                        return;
                   }
              }
         });
     },
     loader:function(param, success, error){
                    var q = param.q || '';
                    var opts = $(this).combobox('options');
                    if (!opts.url) return false;
                       $.ajax({
                              type: opts.method,
                              url: opts.url,
                              data: {
                                      q: q
                              },
                              dataType: 'json',
                              success: function(data){
                                           if (data.rows){
                                               success(data.rows); 
                                           } else {
                                               success(data);
                                           }
                              },
                              error: function(){
                                           error.apply(this, arguments);
                                      }
                         });
                     },
               panelHeight:'auto'">

I want the combobox be like the regular html select tag. The option in the regular html select tag can not be edited but it can be select using Up and Down Arrow when we highlight it. Please see this https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select. Please help.

[jarry]

The code below overrides the 'down' handler to display the drop-down panel and navigate the items via the 'up' and 'down' key.

Code:

$('#cc').combobox({
    editable: false,
    keyHandler: $.extend({}, $.fn.combobox.defaults.keyHandler, {
        down: function(e){
            $(this).combobox('showPanel');
            $.fn.combobox.defaults.keyHandler.down.call(this,e);
        }
    })
})

[Alfred]

This is very nice. Thank you.

[patana]

$('#cc').combobox({
    editable: false,
    keyHandler: $.extend({}, $.fn.combobox.defaults.keyHandler, {
        down: function(e){
            $(this).combobox('showPanel');
            $.fn.combobox.defaults.keyHandler.down.call(this,e);
        }
    })
});

How to make it to global use with all combobox object?

[jahangir]

Use this to make it global.

Code:

$.extend(
 $.fn.combobox.defaults, {
  editable: false
 }
);
	
$.extend(
 $.fn.combobox.defaults.inputEvents, {
   keyup: function (e) {
     if (e.keyCode == 40) {
	$(e.data.target).combobox('showPanel');
     }
   }
 }	
);

[patana]

Cool! Working like magic!