jQuery Change Multiple Strings of Text to Remove All Accents

Question

I have approximately 50 hidden divs I want to sort via keyword matching. To simplify the example, I am currently only showing two. The script works great for English, but when you localize certain words they can contain accents which breaks the ability for the script to find a matched result. Example: in Spanish typing telefono does not match teléfono. I see examples where accents are removed from one string, but how do you remove them from all strings?

<form action="" class="styled" id="live-search" method="post">
    <fieldset>

      <p style="padding-left: 10px; padding-top: 5px;">Start typing to filter.</p>
      <input class="text-input" id="filter" style="margin-top: -60px;" type="text" value="" />  
      <div id="filter-count"></div>
    </fieldset>
</form>

<div>
<p class="listheaders"><strong>Phones:</strong></p>
  <ul class="vglist">
    <li class="listitems"><a href="/en/node/38871" target="_blank">Téléphone Android Nexus 5x<br />
    <img src="someImagePathEtc" width="100" /> </a> <span style="display: none;">teléfono phone nexus 5x</span></li>
    <li class="listitems"><a href="/en/node/33302" target="_blank">Einlösen von Geschenkkarten<br />
    <img src="someImagePathEtc" width="100" /></a> <span style="display: none;">gift cards</span></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the visual guide list
        $(".vglist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut("slow");

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").html("&nbsp;&nbsp;&nbsp;Number of Guides: "+count);
    });
});
</script>

I need to update the following fiddle such that it will match characters typed with our without accents. Thank you

https://jsfiddle.net/jeremyperson/kp2nmm31/

Possible duplicate of [Programatic Accent Reduction in JavaScript (aka text normalization or unaccenting)](http://stackoverflow.com/questions/227950/programatic-accent-reduction-in-javascript-aka-text-normalization-or-unaccentin) — aquinas, Feb 10 '17 at 18:47
I cant add a commento becose my reputatiom but you can see this: http://stackoverflow.com/questions/11115417/string-search-that-ignores-accented-characters — Gabriel Bianconi, Feb 10 '17 at 19:17

score 0 · Answer 1 · answered Feb 13 '17 at 19:58

Below is what I ended up using if it helps anyone in the future.

$(document).ready(function(){
    $("#filter").keyup(function(){

        // Retrieve the input field text

// replace each of the English vowels with all the accentuated equivalents, including the plain English version.
        var filter = $(this).val().replace(/a/g,'[áaàäâ]')
                                               .replace(/e/g,'[éeèëê]')
                                               .replace(/i/g,'[íiìïî]')
                                               .replace(/o/g,'[óoòöô]')
                                               .replace(/u/g,'[úuùüû]')
                                               .replace(/n/g,'[ñn]')
                                               ;
        // reset the count to zero
         var count = 0;

        // Loop through the visual guide list
        $(".vglist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut("slow");

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").html("&nbsp;&nbsp;&nbsp;Number of Guides: "+count);
    });
});

https://jsfiddle.net/kp2nmm31/2/

jQuery Change Multiple Strings of Text to Remove All Accents

1 Answers1