Print Page - Easyui Combox Keyboard Navigation Problem

Title: Easyui Combox Keyboard Navigation Problem
Post by: Alfred on March 31, 2018, 07:12:11 AM

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 (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select). Please help.

Title: Re: Easyui Combox Keyboard Navigation Problem
Post by: jarry on April 01, 2018, 05:32:14 AM

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);
        }
    })
})

Title: Re: Easyui Combox Keyboard Navigation Problem
Post by: Alfred on April 01, 2018, 06:11:16 AM

This is very nice. Thank you.

Title: Re: Easyui Combox Keyboard Navigation Problem
Post by: patana on April 25, 2020, 08:47:19 PM

$('#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?

Title: Re: Easyui Combox Keyboard Navigation Problem
Post by: jahangir on April 26, 2020, 12:51:08 AM

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');
     }
   }
 }	
);

Title: Re: Easyui Combox Keyboard Navigation Problem
Post by: patana on April 26, 2020, 01:39:10 AM

Cool! Working like magic!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Alfred on March 31, 2018, 07:12:11 AM