EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Aod47 on October 23, 2019, 05:53:42 PM

Title: Combobox with Clear Icon,
Post by: Aod47 on October 23, 2019, 05:53:42 PM

From

https://www.jeasyui.com/forum/index.php?topic=3786.0 (https://www.jeasyui.com/forum/index.php?topic=3786.0)

I tried that code with combobox.

Clear icon appear when use arrow key when select item option.
But when select item with mouse. Clear icon does not show.

How to bind change event instead keyup?

Thank you for advice.

Title: Re: Combobox with Clear Icon,
Post by: stworthy on October 23, 2019, 08:23:22 PM

Try this code to attach a clear icon on the combobox component.

Code:

$('#cc').combobox({
	icons: [{
		iconCls: 'icon-clear',
		handler: function(e){
			$(e.data.target).combobox('clear').combobox('textbox').focus();
		}
	}],
	onChange: function(value){
		if (value){
			$(this).combobox('getIcon', 0).css('visibility','visible')
		} else {
			$(this).combobox('getIcon', 0).css('visibility','hidden')
		}
	}
})

Title: Re: Combobox with Clear Icon,
Post by: Aod47 on October 24, 2019, 08:04:34 PM

Thank you sir. :)

for complete. I added below code for prevent display x button when load success but no item select.

Code:

onLoadSuccess: function() { 
		var v = $(this).combobox('getValue');
		if (v) {
			$(this).combobox('getIcon', 0).css('visibility', 'visible');
		} else {
			$(this).combobox('getIcon', 0).css('visibility', 'hidden');
		}
	}