jQuery UI Autocomplete 对接外部数据源如何实现重音映射功能

官方示例的核心逻辑是通过字符标准化实现重音忽略匹配，结合外部PHP数据源可以用以下两种方案实现：

方案1：前端本地匹配（适用于候选数据量较小的场景） #

无需修改后端getData.php，一次性拉取全量候选数据后在前端完成标准化匹配，代码如下：

$(function() {
  // 补全所有需要支持的重音映射
  var accentMap = {
    "á": "a", "à": "a", "ä": "a", "â": "a",
    "é": "e", "è": "e", "ë": "e", "ê": "e",
    "í": "i", "ì": "i", "ï": "i", "î": "i",
    "ó": "o", "ò": "o", "ö": "o", "ô": "o",
    "ú": "u", "ù": "u", "ü": "u", "û": "u",
    "ñ": "n", "ç": "c"
  };

  var normalize = function(term) {
    if (!term) return "";
    // 统一转小写实现大小写不敏感匹配
    term = term.toLowerCase();
    var ret = "";
    for (var i = 0; i < term.length; i++) {
      ret += accentMap[term.charAt(i)] || term.charAt(i);
    }
    return ret;
  };

  // 预拉取全量开发者数据
  var allDevelopers = [];
  $.getJSON("getData.php", function(results) {
    allDevelopers = results;
  });

  $("#developer").autocomplete({
    source: function(request, response) {
      var normalizedTerm = normalize(request.term);
      // 本地过滤匹配
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(normalizedTerm), "i");
      var filtered = $.grep(allDevelopers, function(item) {
        // 如果是对象数组请修改对应字段，比如normalize(item.name)
        return matcher.test(normalize(item));
      });
      response(filtered);
    }
  });
});

此方案改造成本低，不需要调整后端逻辑，缺点是数据量过大时首次加载较慢。

方案2：前后端协同匹配（适用于候选数据量较大的场景） #

前端保持原有传标准化搜索词的逻辑，后端getData.php新增重音标准化逻辑，对存储的姓名做同样的标准化后再匹配：

前端JS代码 #

$(function() {
  var accentMap = {
    // 和方案1的完整映射表保持一致
  };
  var normalize = function(term) {
    if (!term) return "";
    term = term.toLowerCase();
    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);
      })
    }
  });
});

后端getData.php示例代码 #

<?php
// 定义和前端完全一致的重音映射表
$accentMap = [
    'á' => 'a', 'à' => 'a', 'ä' => 'a', 'â' => 'a',
    'é' => 'e', 'è' => 'e', 'ë' => 'e', 'ê' => 'e',
    'í' => 'i', 'ì' => 'i', 'ï' => 'i', 'î' => 'i',
    'ó' => 'o', 'ò' => 'o', 'ö' => 'o', 'ô' => 'o',
    'ú' => 'u', 'ù' => 'u', 'ü' => 'u', 'û' => 'u',
    'ñ' => 'n', 'ç' => 'c'
];

function normalize($term, $accentMap) {
    $term = mb_strtolower($term, 'UTF-8');
    return strtr($term, $accentMap);
}

// 获取前端传的标准化搜索词
$searchTerm = $_GET['term'] ?? '';
// 以下替换为你自己的业务查询逻辑，也可以直接在SQL层做标准化匹配
$allData = [/* 原始姓名数据，也可以从数据库查询获取 */];
$filtered = [];
foreach ($allData as $item) {
    $normalizedItem = normalize($item, $accentMap);
    if (str_contains($normalizedItem, $searchTerm)) {
        $filtered[] = $item;
    }
}

header('Content-Type: application/json');
echo json_encode($filtered);
?>

此方案性能更好，适合数据量过万的场景，需要注意保持前后端重音映射表的规则完全一致。

注意事项 #

• 前后端统一使用UTF-8编码，避免字符编码异常导致匹配失效
• 可以根据实际业务需要补充重音映射表的字符覆盖范围

内容的提问来源于stack exchange，提问作者minz56