Trouble implementing accent neutralize in my table

hm123

I came across the documentation for this important feature here:

https://datatables.net/plug-ins/filtering/type-based/accent-neutralise

I've been trying to get it to work with my table with no success.

Is something wrong with my code below?

https://jsfiddle.net/fcLomrv6/

kthorngren

Try loading the plugin before initializing the Datatable. You can try it here:
http://live.datatables.net/sitojinu/1/edit

If you move the code below the DT init then it doesn't work. You can test by searching for zurich.

Instead of pasting the code snippet you can load the JS via the CDN if you want.

Kevin

hm123

I've tried moving the code above the DataTables initialize. I don't think it's working:

https://jsfiddle.net/k71whc4g/

The reason I want to use the code in JavaScript instead of just loading it from the CDN is because I want to be able to customize the search beyond the few replacement options the CDN restricts itself to.

kthorngren

Do you have data with accents?

How do we test to see if its working?

Kevin

hm123

Actually, I was expecting results to show up when I typed in accented inputs. As that did not happen I concluded it did not work.

But upon changing the table to include accented data as you suggested, I find that the code works (but only for terms that are not fully capitalized)

As for why my initial attempt did not work, I think it's because the capital letter variants were not explicitly included in the accent search and replace code.

Furthermore, am I correct in assuming this modification for accents is not only restricted to the global search, but includes each and every individual column filter search as well?

https://jsfiddle.net/996u17a9/

hm123

Seems my time ran up to edit.

I also wanted to ask regarding this part of the documentation:

Note that with the accented characters being replaced, a search input using accented characters will no longer match. The second example below shows how the function can be used to remove accents from the search input as well, to mitigate this problem

// Remove accented character from search input as well
      $('#myInput').keyup( function () {
        table
          .search(
            jQuery.fn.DataTable.ext.type.search.string( this.value )
          )
          .draw()
      } );

It seems this is why my search using accented characters as an input did not work

This code goes below the DataTables intialize right?

Will it not conflict with my other search on keyup function I use with the individual column search?

hm123

Tried adding that part of the code below the DT initialize and it's not working as expected, accents are not removed from input

https://jsfiddle.net/tht842h9/

kthorngren

It seems this is why my search using accented characters as an input did not work

$('#myInput')

Is the selector used for the particular keyup event. Whatever input you have this assigned will use this event.

Kevin

hm123

So close but yet not quite there:

https://jsfiddle.net/yu578xpf/

I've assigned what should be the proper selector. Yet why won't the code unaccentify my input?

kthorngren

It seems to be working for me.

If I take the ê from this line and paste it into the search the search returns all rows with an e.

replace( /ê/g, 'e' )

If I remove your keyup event then it returns no rows when pasting that same ê. What's typed in the search box is not physically changed.

Kevin

hm123

Sorry my bad, I meant the individual column searches not the global one.

But I was able to fix that by changing the individual columns search handler code from this:

 //Apply the header search event handler
    $( '#mySelection thead'  ).on( 'keyup', ".column_search",function () {
        table
            .column( $(this).parent().index() )
            .search( this.value )
            .draw();
          }); //End of search handler

To this:

//Apply the header search event handler
    $( '#mySelection thead'  ).on( 'keyup', ".column_search",function () {
        table
            .column( $(this).parent().index() )
            .search( $.fn.DataTable.ext.type.search.string( this.value ) )
            .draw();
          }); //End of search handler

https://jsfiddle.net/Lfwtr5vn/

Although I think I may be running into search highlight problems when using foreign accented data that is not Latin. I'll try to make some progress with that and get back with something specific.

hm123

Alright, the thing is, the code to unaccentify latin characters can be used to remove diacritics from non Latin characters just fine, if given the proper replace function.

In the jsfiddle given below, I've updated the table to include foreign characters (along with regular English words) as data, I've also modified the replace function to strip that data of diacritics along with accents.

https://jsfiddle.net/hw3sg86c/

(Note: My table sorts the columns by displaying the English data in alphabetical order, followed by foreign characters in their respective alphabetical order, to see the foreign characters first, click the 'Company' header to reverse the sort order)

The search itself works just fine when looking for foreign characters. The table filters through the results as expected. But two new problems arise:

1) The highlight function does not seem to work for the aforementioned non Latin characters.

2) Adding code to the replace function to include results for foreign characters renders the pre existing latin only unaccentify code to not work. Meaning the search looks for foreign characters and strips them of diacritics now, but searches for accented latin characters fail where it worked before.

Mark.js (along with its respective DataTables integration js) is being used to highlight the search results.

https://datatables.net/blog/2017-01-19

To also neutralise accents in the keyword highlighting process mark.js offers a diacritics option, that is activated by default.

Why does this work for latin accents but not for foreign diacritics?

(Note: Although the following jsfiddle does not use DataTables or Mark.js, it shows a working example of how accents and diacritics can be removed from search with the highlight function intact, I've linked it here because it's relevant and it may help in finding a solution my problem):

https://jsfiddle.net/cnLqftnr/