EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: galcott on August 14, 2024, 07:19:40 AM

Title: Clearing selection in combobox
Post by: galcott on August 14, 2024, 07:19:40 AM

In a combobox that is populated from a URL, it seems that it's necessary for the editable property to be true for the user to be able to clear the selection. They then have to manually erase the selection. I would rather set editable to false and be able to just press the Del key in order to clear the selection. Is that possible?

Title: Re: Clearing selection in combobox
Post by: jarry on August 14, 2024, 06:47:55 PM

Attach the 'clear' icon on the combobox component to clear the values.

Code:

$('#cb').combobox({
	data: data,
	valueField: 'id',
	textField: 'text',
	editable: false,
	iconWidth: 22,
	icons: [{
		iconCls: 'icon-clear',
		handler: function(){
			$('#cb').combobox('clear')
		}
	}],
})

Title: Re: Clearing selection in combobox
Post by: galcott on August 14, 2024, 09:24:43 PM

I don't really like using that icon. Is there a way to set a key handler for the delete key, or some other way to do it by keyboard?

Title: Re: Clearing selection in combobox
Post by: jarry on August 14, 2024, 11:36:32 PM

Override the 'inputEvents' property to set the key handler for the combobox.

Code:

$('#cb').combobox({
	data: data,
	valueField: 'id',
	textField: 'text',
	editable: false,
	inputEvents: $.extend({}, $.fn.combobox.defaults.inputEvents, {
		keyup: function (e) {
			if (e.which == 46) {	// press Delete key
				$('#cb').combobox('clear')
			}
		}
	}),
})

Title: Re: Clearing selection in combobox
Post by: galcott on August 15, 2024, 06:02:52 AM

OK, that works well. You should include complete documentation on extending the components with examples like this. The only place this type of code is included is in forum posts which makes it hard to find.