EasyUI Forum
February 08, 2023, 12:18:09 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Combobox scroll on select  (Read 347 times)
galcott
Newbie
*
Posts: 29


View Profile
« on: January 25, 2023, 11:09:14 AM »

I have a combobox populated from a database table. It has values like A1,A2,A3,C1,C2,C3,S1,S2,S3, etc. The user wants to be able to press a letter key (A,C,S, etc.) and have it jump to the first value beginning with that letter. By using this code I am able to get it to select that value. The problem is that if the value is not in the visible portion of the list, it won't scroll to that value to make it visible. Is there a way to do that?

Code:
 $('#selOrthotic').combobox('textbox').bind('keypress', (function(e) {
    var k=String.fromCharCode(e.which).toUpperCase();
    for (c of $('#selOrthotic').combobox('getData')) {
      // 'code' is the database field name of the value field
      if (c.code.slice(0,1)==k) {
        $('#selOrthotic').combobox('select', c.code);
        break;
      }
    }
  }))
« Last Edit: January 27, 2023, 06:40:29 AM by galcott » Logged
jarry
Administrator
Hero Member
*****
Posts: 2178


View Profile Email
« Reply #1 on: January 28, 2023, 05:03:12 PM »

Overriding the keyHandler may be a better solution. Call the 'setValue' method instead of 'select' method.
Code:
$(function(){
$('#selOrthotic').combobox({
data: data,
valueField: 'code',
textField: 'text',
keyHandler: $.extend({},$.fn.combobox.defaults.keyHandler, {
query: function(q,e){
for(c of $(this).combobox('getData')){
if (c.code.slice(0,1) == q){
// $(this).combobox('select', c.code);
$(this).combobox('setValue', c.code);
return;
}
}
$.fn.combobox.defaults.keyHandler.query.call(this, q, e);
}
})
});
})
Logged
galcott
Newbie
*
Posts: 29


View Profile
« Reply #2 on: January 29, 2023, 10:40:01 AM »

I put this function at the bottom of my page after all the HTML code, but it never executes. I added a console.log statement to see if it was executing and nothing was logged.

Anyway, as far as I can tell this function won't fix the problem, which is that the combobox doesn't scroll so that the selected item is visible. Using setValue doesn't do this scrolling. Is there a way to make that happen? The combobox really needs to have a method to make a specific item visible.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2178


View Profile Email
« Reply #3 on: January 29, 2023, 05:17:50 PM »

This is the working example.
The 'scrollTo' method can be called to scroll to the specified item.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
var data = [
{code:'A1',text:'A1'},
{code:'A2',text:'A2'},
{code:'A3',text:'A3'},
{code:'C1',text:'C1'},
{code:'C2',text:'C2'},
{code:'C3',text:'C3'}
];
$(function(){
$('#selOrthotic').combobox({
data: data,
valueField: 'code',
textField: 'text',
keyHandler: $.extend({},$.fn.combobox.defaults.keyHandler, {
query: function(q,e){
for(c of $(this).combobox('getData')){
if (c.code.slice(0,1) == q){
// $(this).combobox('select', c.code);
$(this).combobox('setValue', c.code);
return;
}
}
$.fn.combobox.defaults.keyHandler.query.call(this, q, e);
}
})
});
})
</script>
</head>
<body>
<input id="selOrthotic" style="width:200px;">
</body>
</html>

Logged
galcott
Newbie
*
Posts: 29


View Profile
« Reply #4 on: January 30, 2023, 08:18:35 AM »

This works as a standalone but doesn't work on my page. My combobox is populated from a database using a url so maybe that makes a difference somehow.

Anyway, why didn't you mention the scrollTo method before, since that was my basic problem? This method isn't listed in the documentation at all. Are there other methods/properties/events that are undocumented??
Logged
jarry
Administrator
Hero Member
*****
Posts: 2178


View Profile Email
« Reply #5 on: January 31, 2023, 07:31:01 AM »

The 'data' or the 'url' properties are only the way to load data. There are no differences on the key pressing behaviours.

The 'scrollTo' method has been added into the documentation.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!