在输入字段上过滤土耳其字符

时间:2017-10-10 07:29:26

标签: jquery

当我输入普通字符时,如何过滤土耳其字符? 当我想要过滤名称'GülayGül'时,当我输入Gul时它不会出现..等等。是否可以通过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>

2 个答案:

答案 0 :(得分:6)

您所寻找的内容名为accent folding.基于this这是我的解决方案,更新您的脚本:

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>

答案 1 :(得分:1)

Turkish字符替换为English字符可以绕过此字符。使用regex来过滤土耳其语单词并用英语替换它们,实际上它会在比较之前替换文本。

// 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>