Combobox editable:false, Select on keypress

[edjeasyui]

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 

[stworthy]

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

Code:

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

[edjeasyui]

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?

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

Code:

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

[stworthy]

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

[edjeasyui]

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