Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Filter Turkish character on input field

Tags:

jquery

How can I filter a Turkish character when I type a normal character? When I want to filter the name 'Gülay Gül' it doesn't show up when I enter Gul.. etc. Is it possible to bypass this with jQuery?

var item = $('.item');
  $('input').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis == '') {
      $(item).show();
    } else {
      $(item).each(function() {
        var text = $(this).text().toLowerCase();
        var match = text.indexOf(valThis);
        if (match >= 0) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search">
<div class="item">
    <h3>John walker</h3>
</div>
<div class="item">
    <h3>Michael Mayer</h3>
</div>
<div class="item">
    <h3>Tim Jones</h3>
</div>
<div class="item">
    <h3>Gülay Gül</h3>
</div>
like image 919
Rovi Avatar asked Mar 07 '23 20:03

Rovi


1 Answers

What you are looking for is called accent folding. Based on this here is my solution, updating your script :

var item = $('.item');
  $('input').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis == '') {
      $(item).show();
    } else {
      $(item).each(function() {
        var text = accentsTidy($(this).text().toLowerCase());
        var match = text.indexOf(valThis);
        if (match >= 0) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    };
  });
  
  accentsTidy = function(s) {
    var map = [
        ["\\s", ""],
        ["[àáâãäå]", "a"],
        ["æ", "ae"],
        ["ç", "c"],
        ["[èéêë]", "e"],
        ["[ìíîï]", "i"],
        ["ñ", "n"],
        ["[òóôõö]", "o"],
        ["œ", "oe"],
        ["[ùúûü]", "u"],
        ["[ýÿ]", "y"],
        ["\\W", ""]
    ];
    for (var i=0; i<map.length; ++i) {
        s = s.replace(new RegExp(map[i][0], "gi"), function(match) {
            if (match.toUpperCase() === match) {
                return map[i][1].toUpperCase();
            } else {
                return map[i][1];
            }
        });
    }
    return s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search">
<div class="item">
    <h3>John walker</h3>
</div>
<div class="item">
    <h3>Michael Mayer</h3>
</div>
<div class="item">
    <h3>Tim Jones</h3>
</div>
<div class="item">
    <h3>Gülay Gül</h3>
</div>
like image 112
Optional Avatar answered Mar 10 '23 09:03

Optional