title: how to wrap span tags around a datatables search input to integrate 'clear search' feature with jquery?
body: <p>I want to add a feature to a datatables search field where clicking on an icon within the input field clears the searched for text.  </p>
  
  <p>there is a working clear search jsfiddle here:</p>
  
  <p><a href="http://jsfiddle.net/PJZmv/801/" rel="nofollow">http://jsfiddle.net/PJZmv/801/</a></p>
  
  <p>and i am trying to integrate this with datatables here:</p>
  
  <p><a href="http://jsfiddle.net/rwone/Y37hZ/" rel="nofollow">http://jsfiddle.net/rwone/Y37hZ/</a></p>
  
  <p>these are the steps i have taken:</p>
  
  <p>customise the <code>jquery.dataTables.js</code> script by changing:</p>
  
  <pre><code>sSearchStr.replace('_INPUT_', '&lt;input type="text" /&gt;') :
  sSearchStr==="" ? '&lt;input type="text" /&gt;' : sSearchStr+' &lt;input type="text" /&gt;';
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>sSearchStr.replace('_INPUT_', '&lt;span class="clearable"&gt;&lt;input type="text" name="data_field" value="" /&gt;&lt;span class="icon_clear"&gt;x&lt;/span&gt;&lt;/span&gt;') :
  sSearchStr==="" ? '&lt;span class="clearable"&gt;&lt;input type="text" name="data_field" value="" /&gt;&lt;span class="icon_clear"&gt;x&lt;/span&gt;&lt;/span&gt;' : sSearchStr+' &lt;span class="clearable"&gt;&lt;input type="text" name="data_field" value="" /&gt;&lt;span class="icon_clear"&gt;x&lt;/span&gt;&lt;/span&gt;';
  </code></pre>
  
  <p>and added this css:</p>
  
  <pre><code>/* added clear search css */
  
  .clearable {
  position:relative;
  }
  .data_field {
  padding-right:30px; /* add space for the 'x' icon*/
  }
  span.icon_clear {
  position:absolute;
  right: 9px;
  display: none;
  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></pre>
  
  <p>and then added the jquery:</p>
  
  <pre><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></pre>
  
  <p>but as you can see in the jsfiddle it is not working yet.</p>
  
  <p>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.  </p>