jquery - 在输入字段中过滤土耳其语字符

Question

当我输入普通字符时，如何过滤土耳其语字符？ 当我想过滤名称“Gülay Gü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>

Answer 1

您正在寻找的称为重音折叠。基于 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>