Print Page - Combobox scroll on select

Title: Combobox scroll on select
Post by: galcott 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;
      }
    }
  }))

Title: Re: Combobox scroll on select
Post by: jarry 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);
			}
		})
	});
})

Title: Re: Combobox scroll on select
Post by: galcott 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.

Title: Re: Combobox scroll on select
Post by: jarry 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>

Title: Re: Combobox scroll on select
Post by: galcott 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??

Title: Re: Combobox scroll on select
Post by: jarry 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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: galcott on January 25, 2023, 11:09:14 AM