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:<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.