jquery - 使用 jquery 搜索具有非拉丁字符的过滤器功能

Question

基于之前的question我正在努力构建 - 在社区的帮助下 - 一个搜索过滤器功能，即使用户在搜索输入字段中键入非拉丁字符(在本例中为瑞典字母)也能正常工作。

这是我到目前为止所拥有的:

var langMap = {
'a' : 'å',
'a' : 'ä',
'o' : 'ö'
}

$('#search-items-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 == ""){
        $('.itemsList .m3-item').show();           
    } else {
        $('.itemsList .m3-item').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(filteredWord) == 0) ? $(this).show() : $(this).hide();
        });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input placeholder="Search Me" id="search-items-box" type="text" /> 

<div class="itemsList">
<div class="m3-item">Orånge</div>
<div class="m3-item">Banäna</div>
<div class="m3-item">Potatö</div>
</div>

问题是搜索不能正常工作。如果您尝试键入这三个词，您会发现结果没有显示。

JSFIDDLE Here

Answer 1

第一个条件是在每次击键时更改字符输入，如果条件满足:

if (langMap[letter]) {
    return langMap[letter];

现在，当您输入“b”时，Banana 会出现在搜索中，因为“b”不是您的 langMap 数组的一部分，因此不会被修改。它搜索以“b”开头的任何单词，搜索结果是“Banäna”

但是，一旦您键入“a”，Banana 就不再存在了，因为它已转换为“å”。因此，它正在搜索返回零结果的“bå”(正如预期的那样)。

另一方面，稍后您可能还会遇到 langMap 数组的另一个问题:

var langMap = {
    'a' : 'å',
    'a' : 'ä',
    'o' : 'ö'
};

您有一个键 'a'，它定义了两个不同的值。其中一个值将永远无法访问。

根据我们的讨论，这是我提出的解决方案:

• 反转 langMap 的键和值

• 将比较的文本转换为拉丁字符

   var langMap = {
    "å":"a",
    "ä":"a",
    "ö":"o"
   }
  
   $('#search-items-box').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    var filteredWord = getLatinWord(valThis);
  
    if(filteredWord == ""){
        $('.itemsList .m3-item').show();           
    } else {
        $('.itemsList .m3-item').each(function(){
            var text = $(this).text().toLowerCase();
            text = getLatinWord(text);
            (text.indexOf(filteredWord) === 0) ? $(this).show() : $(this).hide();
        });
    }
   });
  
   function getLatinWord(word){
     return word.split('').map(function(character){
                            if (langMap[character]) {
                              return langMap[character];
                            }
                            return character;
                         }).join('');
   }