CODEWITHSUNDEEP
jquery
Rovi
Rovi

Reputation: 73

Filter Turkish character on input field

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>

Upvotes: 4

Views: 2198

Answers (2)

Pedram
Pedram

Reputation: 16595

With replacing Turkish character with English character you can bypass this. using regex to filter turkish word and replace these with english, actually it replace text before compare.

// search filter
  var item = $('.item');
  var Turkish = {
      Ç: 'C',
      Ö: 'O',
      Ş: 'S',
      İ: 'I',
      I: 'i',
      Ü: 'U',
      Ğ: 'G',
      ç: 'c',
      ö: 'o',
      ş: 's',
      ı: 'i',
      ü: 'u',
      ğ: 'g'
    };


  $('input').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis == '') {
      $(item).show();
    } else {
      $(item).each(function() {
        var text = $(this).text().toLowerCase();
        
var clearTr = text.replace(/Ü|Ç|Ö|Ş|İ|I|Ğ|ç|ö|ş|ı|ü|ğ/gi, function(matched){
  return Turkish[matched];
});
        var match = clearTr.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>
<div class="item">
    <h3>Derya Uluğ</h3>
</div>

Upvotes: 2

Optional
Optional

Reputation: 4507

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>

Upvotes: 6

Related Questions