After using the code I found here, it seemed to work as expected. However, when implemented on my page, everything worked except for the cursor not changing when hovering over the 'x' button. Surprisingly, the cursor only changed when the input box was disabled.
Furthermore, an observation I made was that the code wouldn't function unless I added the following snippet to my CSS file. Not sure if this is relevant...
.ui-autocomplete{}
My theory is that it might be related to bringing the image to the front, but all attempts to fix it have proved futile.
Update: Included screenshots showcasing the issue...
Cursor changes when input is disabled...https://i.sstatic.net/qa7SX.png
Cursor doesn't change when enabled...https://i.sstatic.net/9fstm.png
The main goal is to modify the cursor to a hand when the input is enabled.
Here's an update to the code... still facing issues but wanted to share the revised version.
$(function($){
function tog(v){return v?'addClass':'removeClass';}
$(document).on('mouseenter', '.clearable', function(){
if ($(this).prop('disabled')===false) {
$(this)[tog(this.value)]('x');
}
}).on('mousemove', '.x', function(e){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('mouseleave', '.x', function(){
$(this).removeClass('x');//.val('').change();
}).on('click', '.onX', function(ev){
ev.preventDefault();
$(this).removeClass('x onX').val('').change();
$(this).trigger('keyup');
});
});