Vue.js+Axios调用geo.api.gouv实现支持空格/重音的城市模糊搜索

解决方案 #

你遇到的问题核心有两个：一是Vuetify的v-autocomplete默认开启了本地精确匹配，会过滤掉接口返回的不精确匹配结果；二是你的API调用代码存在语法错误，且没有对搜索词做兼容预处理，具体修改步骤如下：

1. 修改v-autocomplete组件配置 #

关闭组件自带的本地过滤逻辑，直接使用远程接口返回的结果列表，同时修正你代码里的中文引号错误：

<v-autocomplete
    v-else
    @input="inputCity('departureCity', 'departureDepartment', selectedArrayCityDeparture)"
    :loading="loading"
    :items="citiesDeparture"
    :search-input.sync="searchCitiesDeparture"
    v-model="selectedArrayCityDeparture"
    :rules="[
        (value) => searchCitiesDeparture !== null || $t('form.validation.theDepartureCity') + ' ' + $t('isRequired')
        ]"
    text
    hide-no-data
    no-filter <!-- 新增这行，关闭本地过滤 -->
    required
    :label="$t('form.departureCity')"
    :no-data-text="$t('noDataAvailable')"
/>

到达站的v-autocomplete组件也要做相同修改，加上no-filter属性。

2. 修复API调用封装的语法错误 #

你当前的API地址末尾多了一个多余的双引号，会导致请求参数异常，同时可以添加limit参数控制返回结果数量：

gouv: {
    cities: function (name) {
        // 去掉末尾多余的双引号，新增limit参数限制返回10条结果，可自行调整
        return ('https://geo.api.gouv.fr/communes?nom=' + encodeURIComponent(name) + '&fields=&format=json&geometry=centre&limit=10');
    }
},

这里新增了encodeURIComponent处理关键词，避免特殊字符导致请求异常。

3. 新增关键词规范化预处理（可选，提升匹配兼容性） #

你可以在调用接口前对用户输入的关键词做重音移除、多余空格合并处理，进一步适配非精确输入场景：
首先在methods里新增规范化工具方法：

// 新增文本规范化方法，移除重音、合并多余空格、转小写
normalizeText(str) {
  return str.normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '') // 移除重音符号
    .replace(/\s+/g, ' ') // 合并多个空格为单个
    .trim()
    .toLowerCase()
},

然后修改querySelections方法，预处理搜索词，同时补全加载状态设置：

querySelections(q, cities) {
  // 预处理搜索词
  const processedQ = this.normalizeText(q)
  this.loading = true // 调用接口前开启加载状态
  this.$axios.get(this.apiRoutes.gouv.cities(processedQ)).then(
    response => {
      this.loading = false;
      this[cities] = _.map(response.data, function (item, i) {
          return ({ text: item.nom + ' (' + item.codeDepartement + ')' , value: i });
      });
      this.responseCities = response.data;
    }
  )
},

修改完成后即可实现和官方演示一致的模糊搜索能力，支持不带重音、空格变体的输入匹配。

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