如何使用 jquery 制作一个输入字段来处理拉丁语等非拉丁字符?

Question

我正在尝试使用jquery插件"Fuzzysearch"构建自动完成模糊搜索。我的问题是它仅适用于拉丁字符。例如，如果我使用像"ä"或"å"这样的瑞典字符，它不会显示包含拉丁语 caharacter "a" 的结果，反之亦然。我想解决方案是创建一个变量并用拉丁字符分配非拉丁字符，如下面的代码所示。

但我真的不知道如何使用这个变量，所以如果有人在输入字段中键入非拉丁字符以显示包含分配字母的所有单词。

例如，如果我输入字母"å"，结果列表必须包含单词"Orånge E8"、"小米 MiA1"、"三星 S9"、"摩托罗拉 M5"等，当我输入拉丁字母"a"时，也会得到包含非拉丁字符的单词，如"å"或/和"ä"等

我不认为我的问题与这个问题重复，因为我想使用 jquery 而不是 javascript

这是我的代码：

var productsList = [
{"productName":"iPhone 8"},
{"productName":"iPhone X"},
{"productName":"Xiaomi MiA1"},
{"productName":"Motorola M5"},
{"productName":"Samsung S9"},
{"productName":"One Plus 5"},
{"productName":"Alcatel X1"},
{"productName":"Orånge E8"}
];
$(document).ready(function(){
	$("#category").fuzzyComplete(productsList);
});

var letterMap = {
"å":"a",
"ä":"a"
}
$('#category').keyup(function(){
//How can i use the variable "letterMap" ???
});

.search-block {position:relative;width:300px}
.category-field{width:100%;padding:8px;}
.fuzzyResults {
background: #fff;
z-index: 1;
padding:0px !important;
top: 100% !important;
left:0;
position: absolute;
border: 1px solid #ddd;
width: 100% !important;
margin-top:5px;
display:none;
}
.__autoitem {
padding:10px;
font-size: 1.1em;
cursor: pointer;
font-weight:600;
}
.__autoitem:hover {
background:#eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/JSON-Autocomplete-Fuzzy-Search-jQuery-fuzzyComplete/fuse.min.js"></script>
<script src="https://www.jqueryscript.net/demo/JSON-Autocomplete-Fuzzy-Search-jQuery-fuzzyComplete/dist/js/fuzzycomplete.min.js"></script>
<div class="search-block">
<p>FIND A PRODUCT</p>
<input placeholder="eg iphone,samsung etc..." required="required" class="category-field" name="category" id="category" autocomplete="off" type="text">
</div>

Answer 1

当我包含文件时，我用这个小东西来转换字符集。下面应该只需将其复制/粘贴到底部的代码中即可。

$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});