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

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:

sSearchStr.replace('_INPUT_', '<input type="text" />') :
sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />';

to:

sSearchStr.replace('_INPUT_', '<span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>') :
sSearchStr==="" ? '<span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>' : sSearchStr+' <span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>';

and adding this css:

/* 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 */

and this jquery:

$(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('');
});

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.