我正在尝试使用jquery插件“ Fuzzysearch”构建自动完成的模糊搜索。我的问题是它仅适用于拉丁字符。例如,如果我使用瑞典字符,例如“ä”或“å”,则不会显示包含拉丁字母“ a”的结果,反之亦然。我猜解决方案是创建一个变量,并用下面的代码向非拉丁字符分配拉丁字符。
但是我真的不知道如何使用此变量,因此,如果有人在输入字段中键入非拉丁字符以显示包含所分配字母的所有单词。
例如,如果我键入字母“å”,则结果列表中必须包含单词“OrångeE8”,“ Xiaomi MiA1”,“ Samsung S9”,“ Motorola M5”等,而当我键入拉丁字母“ a”时“还可以获取包含非拉丁字符(如“å”或/和“ä”等)的单词
我不认为我的问题重复了this question,因为我想使用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>