Filter data with and without accents datatable jquery

Question

I need to enter a text with accent. I filter the matching lines, both words with accent and those that do not have.

Here is my fiddle . Apparently it is for the version of jquery.datatable .

Can someone help me? I wish it to come out like:

$(document).ready(function() {
   $('#datatable-table').DataTable();
});

I have this table

When I filter by arbol only show me one row but i have the two rows, "arbol" and "árbol" (with accent).

---

Edit

I have added this code, but note that it does not apply to columns that have empty fields:

jQuery.fn.DataTable.ext.type.search.string = function ( data ) {
console.log('dataaaa: ' + data);
return ! data ?
    '' :
    typeof data === 'string' ?
        data
            .replace( /έ/g, 'ε')
            .replace( /ύ/g, 'υ')
            .replace( /ό/g, 'ο')
            .replace( /ώ/g, 'ω')
            .replace( /ά/g, 'α')
            .replace( /ί/g, 'ι')
            .replace( /ή/g, 'η')
            .replace( /\n/g, ' ' )
            .replace( /[áÁ]/g, 'a' )
            .replace( /[éÉ]/g, 'e' )
            .replace( /[íÍ]/g, 'i' )
            .replace( /[óÓ]/g, 'o' )
            .replace( /[úÚ]/g, 'u' )
            .replace( /ê/g, 'e' )
            .replace( /î/g, 'i' )
            .replace( /ô/g, 'o' )
            .replace( /è/g, 'e' )
            .replace( /ï/g, 'i' )
            .replace( /ü/g, 'u' )
            .replace( /ã/g, 'a' )
            .replace( /õ/g, 'o' )
            .replace( /ç/g, 'c' )
            .replace( /ì/g, 'i' ) :
        data;
};

Answer 1

look at their API: https://datatables.net/manual/api . Maybe there is mentioned if custom filter are supported. If not, you could also do this on your own by changing this function ->

var table = $('#example').DataTable();

table.columns().flatten().each( function ( colIdx ) {
// Create the select list and search operation
var select = $('<select />')
    .appendTo(
        table.column(colIdx).footer()
    )
    .on( 'change', function () {
        table
            .column( colIdx )
            .search( $(this).val() ) <-- here
            .draw();
    } );

// Get the search data for the first column and add to the select list
table
    .column( colIdx )
    .cache( 'search' )
    .sort()
    .unique()
    .each( function ( d ) {
        select.append( $('<option value="'+d+'">'+d+'</option>') );
    } );

} );

Answer 2

$('#datatable-table').DataTable({
   search: { regex: true }
});

let oldInput = $('.dataTables_filter input');
let newInput = $('<input>').on('change keyup input', () => {
  let regex = textToRegex(newInput.val());
  oldInput.val(regex).trigger('input');
});
oldInput.hide().after(newInput);

function textToRegex(value) {
  return value
    .toLowerCase()
    .split('')
    .map(c => {
      if (/[-[\]{}()*+?.,\\^$|#]/.test(c)) {
        return '\\' + c;
      }
      [
        /[aàáâãäå]/, /[oòóôõöø]/, /[eèéêë]/, /[cç]/, /[dð]/,
        /[ii̇ìíîï]/, /[uùúûü]/, /[nñ]/, /[sš]/, /[yÿý]/, /[zž]/
      ].some(r => {
        if (r.test(c)) {
          c = r.source;
          return true;
        }
      });
      return c;
    })
    .join('');
}