Jquery UI Autocomplete - 从外部源绘制数据时如何使用 Accent Mapping
Posted
技术标签:
【中文标题】Jquery UI Autocomplete - 从外部源绘制数据时如何使用 Accent Mapping【英文标题】：Jquery UI Autocomplete - how to use Accent Mapping when drawing data from external source 【发布时间】：2021-11-08 08:15:04 【问题描述】：我的网站上有一个搜索表单，其中 JQuery UI 自动完成功能可以找到匹配的名称。我很快就发现了重音名称的问题（如 Jörn Zaefferer），并在 JQuery UI 文档中找到了以下解决方案。
$(function()
var accentMap =
"á": "a",
"ö": "o",
"ü": "u"
;
var normalize = function(term)
var ret = "";
for (var i = 0; i < term.length; i++)
ret += accentMap[term.charAt(i)] || term.charAt(i);
return ret;
;
$("#developer").autocomplete(
source: function(request, response)
$.getJSON("getData.php",
term: normalize(request.term)
, function(results)
response(results);
)
);
);<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<form>
<label for="developer">Developer: </label>
<input id="developer">
</form>
</div>
</body>
</html>`在这个简单的示例中，数据（变量名称）保存在脚本中，但我希望能够从外部文件中提取类似的数据。我可以使用不同的脚本（使用源代码：getData.php）但没有 Accent Mapping 来做到这一点。我不确定如何将两者集成在一起，以便我可以对来自外部文件的数据进行重点映射。任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：考虑一个小改动。而不是使用$.grep()，您只需将未重音的术语发送到您的 PHP 脚本。结果将发送到您的响应。
$(function()
var accentMap =
"á": "a",
"ö": "o"
;
var normalize = function(term)
var ret = "";
for (var i = 0; i < term.length; i++)
ret += accentMap[term.charAt(i)] || term.charAt(i);
return ret;
;
$("#developer").autocomplete(
source: function(request, response)
$.getJSON("getData.php",
term: normalize(request.term)
, function(results)
response(results);
)
);
);<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<form>
<label for="developer">Developer: </label>
<input id="developer">
</form>
</div>因此，如果用户输入“Jö”，脚本会将“jo”发送到 getData.php，并将获得一组结果，其中包括“Jörn Zaefferer”。
使用 PHP 更新
您表示您的 PHP 正在使用以下代码。
<?php
$term = $_GET[ "term" ];
$singers = array(
array(
"label" => "Skelton, Stuart / singer",
"value" => "Skelton, Stuart / singer"
),
array(
"label" => "Groissböck , Günther / singer",
"value" => "Groissböck , Günther / singer"
)
);
$result = array();
foreach($singers as $singer)
$singerLabel = $singer[ "label" ];
if ( strpos( strtoupper($singerLabel), strtoupper($term) ) !== false )
array_push( $result, $singer );
echo json_encode( $result );
?>
如果用户输入“gr”，javascript 会将其规范化为“gr”并发出 GET 请求。 PHP 将接受请求，$term 的值为 "gr"。
首先，为了您的比较，我会使用stripos()：
stripos — 查找字符串中不区分大小写的子字符串第一次出现的位置
我们需要确定$term 是否是任何标签的一部分。标签应该标准化。在这个测试用例中，没关系。
$result = array();
foreach($singers as $singer)
if (stripos($singer['label'], $term) !== false)
$result[] = $singer;
/* Note: If you use array_push() to add one element to the array, it's better to use $array[] = because in that way there is no overhead of calling a function. */
header('Content-Type: application/json; charset=utf-8');
echo json_encode($result);
考虑规范化您的标签。完整示例 PHP 代码：
<?php
$term = $_GET[ "term" ];
$singers = array(
array(
"label" => "Skelton, Stuart / singer",
"value" => "Skelton, Stuart / singer"
),
array(
"label" => "Groissbock , Gunther / singer",
"value" => "Groissböck , Günther / singer"
)
);
$result = array();
foreach($singers as $singer)
if (stripos($singer['label'], $term) !== false)
$result[] = $singer;
header('Content-Type: application/json; charset=utf-8');
echo json_encode($result);
?>
【讨论】：
感谢@Twisty 从 getData.php 文件中提取并找到匹配项的响应，但不幸的是没有找到带有重音符号的名称。我已将 getData.php 文件定义如下： $term = $_GET[ "term" ]; $singers = 数组（数组（“标签”=>“斯凯尔顿，斯图尔特/歌手”，“价值”=>“斯凯尔顿，斯图尔特/歌手”），数组（“标签”=>“Groissböck，Günther/歌手”，“ value" => "Groissböck , Günther / 歌手" )); $结果 = 数组（）； foreach ($singers as $singer) $singerLabel = $singer[ "label" ]; if ( strpos( strtoupper($singerLabel), strtoupper($term) )!== false ) array_push( $result, $singer ); echo json_encode( $result ); 使用这个数据找到了 Skelton，但在输入 gr 时没有找到 Groissböck。这是定义数据的正确方法还是有更简单/更好的方法？谢谢 感谢您的详细回复和建议。不幸的是，您之前建议的 JQuery 脚本和上面的规范化 PHP 我仍然无法正常工作。 sk 找到 Skelton，但 gr 没有找到 Groissbock。如果我添加第三个名称（Lundgren、Stewart），那么 st 会找到 Skelton 和 Lundgren，但 gr 仍然什么也找不到（除了 Groissbock 之外，它还应该找到 Lundgren）。 虽然我主要关心的是让它发挥作用，但我想知道您为什么建议对标签进行规范化？ “标签”条目用于显示在下拉列表中，而“值”条目返回到搜索框。从用户的角度来看，重音应该在两者中，以便始终正确显示名称。以上是关于Jquery UI Autocomplete - 从外部源绘制数据时如何使用 Accent Mapping的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 实例 - 自动完成（Autocomplete）