how to wrap span tags around a datatables search input to integrate 'clear search' jquery?

rw1

i am wanting to add a feature to a datatables search field where clicking on an icon within the input field clears the searched for text.

there is a working clear search jsfiddle here:

http://jsfiddle.net/PJZmv/801/

and i am trying to integrate this with datatables here:

http://jsfiddle.net/rwone/Y37hZ/

these are the steps i have taken:

customise the 'jquery.dataTables.js' script by changing:
[code]
sSearchStr.replace('_INPUT_', '') :
sSearchStr==="" ? '' : sSearchStr+' ';
[/code]

to:
[code]
sSearchStr.replace('_INPUT_', 'x') :
sSearchStr==="" ? 'x' : sSearchStr+' x';
[/code]

and adding this css:

[code]
/* added clear search css */

.clearable {
position:relative;
}
.data_field {
padding-right:30px; /* add space for the 'x' icon*/
}
span.icon_clear {
position:absolute;
display:none;
right: 9px;
top: -2px;
cursor:pointer;
font: bold 14px sans-serif;
color:#cc0000 !important;
}

span.icon_clear:hover {
color:#f52 !important;
}

/* end added clear search css */
[/code]

and this jquery:

[code]
$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});
[/code]

but as you can see in the jsfiddle it is not working yet.

so the desired outcome is for the 'clear search' feature to be working in the datatables integration as well as it does in the standalone jsfiddle.

thank you.

rw1

update:

this works, modifying the first line of the above js code to:

[code]$(document).on('propertychange keyup input paste', 'input[name="data_field"]', function(){[/code]

however i still have to backspace again to get all the table results back after clicking the clear button...

any ideas?

thanks!

rw1

solution: add this at the end:

[code]$(this).siblings('input').trigger('keyup.DT');[/code]