时间戳

首页 > 解决方案 > 如何使用 jquery 创建一个输入字段来处理像拉丁语这样的非拉丁字符？

jquery - 如何使用 jquery 创建一个输入字段来处理像拉丁语这样的非拉丁字符？

问题描述

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

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

例如，如果我输入字母“å”，结果列表必须包含“Orånge E8”、“Xiaomi MiA1”、“Samsung S9”、“Motorola 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>

标签： jqueryhtml

解决方案

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

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

推荐阅读