Question

我正在尝试使用jquery为我的网站构建搜索过滤器功能。它对于拉丁字符非常有效，但是当我尝试搜索非拉丁字符（例如瑞典语单词）时，它不起作用。

这是我使用的代码：

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.navList > li').show();
  } else {
    $('.navList > li').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search Me" id="box" type="text" />
<ul class="navList">
  <li>människa</li>
  <li>träd</li>
  <li>acai</li>
  <li>blueberry</li>
  <li>bananas</li>
  <li>cherry</li>
  <li>coconut</li>
  <li>donut</li>
  <li>durean</li>
</ul>

请注意，列表中的前两个单词是瑞典语单词。我要做的是使搜索功能忽略瑞典字母“ä”，并将其与拉丁字母“ a”相同。

为了更加清楚，我只想强制搜索功能将字母“ä”和“ a”视为相同。因此，当您开始输入...“ ma”或“mä”来显示单词“människa”

我在JSFIDDLE

中有一个在线示例

Answer 1

如果您知道等效的字母，则可以为每个要替换的字母创建一个映射。我已经更新了fiddle，请检查。

var langMap = {
  'a': 'ä'
}

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  var filteredWord = valThis.split('').map(function(letter) {
    if (langMap[letter]) {
      return langMap[letter];
    }
    return letter;
  }).join('');

  if (filteredWord == "") {
    $('.navList > li').show();
  } else {
    $('.navList > li').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(filteredWord) >= 0) ? $(this).show(): $(this).hide();
    });
  };
});

Answer 2

$('#box').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    $('#box').val(valThis.replace(/[\u0250-\ue007]/g, '')); //non-latin letter will be removed. 
    if (valThis == "") {
        $('.navList > li').show();
    } else {
        $('.navList > li').each(function() {
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
        });
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search Me" id="box" type="text" />
<ul class="navList">
   <li>människa</li>
   <li>träd</li>
   <li>acai</li>
   <li>blueberry</li>
   <li>bananas</li>
   <li>cherry</li>
   <li>coconut</li>
   <li>donut</li>
   <li>durean</li>
</ul>

说明：-我尝试使用مرحبا字母，并且可以正常工作

如何强制我的搜索输入字段忽略非拉丁字符？

2 个答案: