autoComplete.js无重音字符搜索失效问题求助

问题核心是前端匹配逻辑默认区分重音字符：虽然目标API能返回带重音的城市结果，但autoComplete.js的默认匹配器会直接用原始输入字符串和带重音的结果文本做对比，导致无重音输入无法匹配到结果。

你可以通过以下两种方式解决：

方法1：自定义匹配器忽略重音 #

修改autoComplete.js的配置，添加自定义匹配函数，对输入和结果文本都做去重音+小写规范化处理后再判断包含关系：

// 工具函数：规范化字符串（去重音、转小写）
function normalizeStr(str) {
  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
}

// 初始化autoComplete实例
new autoComplete({
  selector: '#autoComplete',
  source: async (query) => {
    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?q=${encodeURIComponent(query)}&type=municipality`);
    const data = await response.json();
    return data.features.map(feature => ({ 
      label: feature.properties.label, 
      value: feature.properties.name 
    }));
  },
  // 自定义匹配逻辑，忽略重音和大小写
  matcher: (input, record) => {
    const normalizedInput = normalizeStr(input);
    const normalizedLabel = normalizeStr(record.label);
    return normalizedLabel.includes(normalizedInput);
  }
});

方法2：同时优化API请求和前端匹配 #

在发送请求前就把用户输入规范化，让API更精准返回结果，再结合自定义匹配做双重保障：

function normalizeStr(str) {
  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
}

new autoComplete({
  selector: '#autoComplete',
  source: async (query) => {
    // 对用户输入规范化后再请求API
    const normalizedQuery = normalizeStr(query);
    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?q=${encodeURIComponent(normalizedQuery)}&type=municipality`);
    const data = await response.json();
    return data.features.map(feature => ({ 
      label: feature.properties.label, 
      value: feature.properties.name,
      // 提前规范化结果文本，避免匹配时重复处理
      normalizedLabel: normalizeStr(feature.properties.label)
    }));
  },
  matcher: (input, record) => {
    return record.normalizedLabel.includes(normalizeStr(input));
  }
});

这两种方法都能让你输入"frejus"时，正确匹配到"fréjus"的相关结果。

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