Print Page - Combobox editable:false, Select on keypress

Title: Combobox editable:false, Select on keypress
Post by: edjeasyui on February 05, 2014, 02:12:29 AM

Hi all!

Is there any way to select or filter values in an easyui-combobox on key press?
I don't want the user to be able to write in the combo cause he is able to write anything maybe not valid (not included in the dropdown list)

The functionality that we desire is like simple select element
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

Regards :)

Title: Re: Combobox editable:false, Select on keypress
Post by: stworthy on February 05, 2014, 03:27:53 AM

To prevent from typing anything in textbox, please set 'editable' property to false.

Code:

$('#cc').combobox({
  editable:false
});

Title: Re: Combobox editable:false, Select on keypress
Post by: edjeasyui on February 05, 2014, 04:57:19 AM

Thanks for the quick answer stworthy.
Although that is not my case. I want to prevent user from writing in textbox but I want him to be able so select values by pressing letters just like the
link I provided to my original post (when you click on combo and type "A" then Audi is selected)
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

Do you have a solution for this?

Quote from: stworthy on February 05, 2014, 03:27:53 AM

To prevent from typing anything in textbox, please set 'editable' property to false.

Code:

$('#cc').combobox({
  editable:false
});

Title: Re: Combobox editable:false, Select on keypress
Post by: stworthy on February 05, 2014, 08:21:31 AM

Please try to add a keydown event hander to the textbox.

Code:

var cc = $('#cc');  // the combobox object
cc.combobox('textbox').bind('keydown', function(e){
	var s = String.fromCharCode(e.keyCode);
	var opts = cc.combobox('options');
	var data = cc.combobox('getData');
	for(var i=0; i<data.length; i++){
		var item = data[i];
		if (item[opts.textField].toLowerCase().indexOf(s.toLowerCase()) >= 0){
				cc.combobox('select', item[opts.valueField]);
				return;
		}
	}
})

Title: Re: Combobox editable:false, Select on keypress
Post by: edjeasyui on February 05, 2014, 09:28:36 AM

Thanks stworthy you are a life saver!

below in my version that loops in values developed as a plugin

Code:

(function($) {
	$.extend($.fn.combobox.methods, {
		makeLetterSelectable: function(jq){
			return jq.each(function() {
				var cc = $(this);  // the combobox object
				cc.combobox('textbox').bind('keydown', function(e){
					var s = String.fromCharCode(e.keyCode);
					var opts = cc.combobox('options');
					var data = cc.combobox('getData');
					var state = $.data(cc[0],'combobox');

					for(var i=0; i<data.length; i++){
						var item = data[i];

						if (item[opts.textField].toLowerCase().substring(0,1)==s.toLowerCase() ){

							if(typeof state.index== 'undefined'  || (typeof state.index!= 'undefined' && i>state.index)){
								cc.combobox('select', item[opts.valueField]);
								state.index = i;
								break;
							}
						}
						if(i==data.length-1 && typeof state.index!='undefined'){
							state.index= undefined;
							arguments.callee(e);
						}
					}

				});
			});

		}
	});
})(jQuery);

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: edjeasyui on February 05, 2014, 02:12:29 AM