Javascript Input Datalist重复添加option及搜索结果无法选中问题求助

• 未清空历史option：每次keyup触发请求返回结果后，直接向datalist追加新option，没有清理上一次搜索的旧数据，导致结果重复堆叠
• 缺少请求防抖逻辑：用户连续输入时会频繁触发AJAX请求，不仅会增加服务器压力，还可能出现后发的请求先返回、旧结果覆盖新结果的异常，间接导致选项无法正常选中
• 搜索参数未编码：如果用户输入中文、空格或特殊字符，直接拼接在URL里会导致请求参数异常，返回结果不符合预期
• 可选异常点：如果API返回的记录存在相同的city字段值，重复的option value会导致datalist匹配异常，出现无法选中的问题

基础修复（解决重复+参数异常问题） #

每次写入新option前先清空datalist的现有内容，同时对搜索参数做URL编码，修改后代码如下：

function findCity(citySearch, j){
  const $datalist = $("#countriesFrom-" + j);
  // 输入长度不足3时清空datalist，避免残留旧选项
  if (citySearch.length <= 3) {
    $datalist.empty();
    return;
  }
  $.ajax({
    url: './api/country/find.php?city=' + encodeURIComponent(citySearch),
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    dataType: 'JSON',
    success: function(response){
      // 先清空历史option，再追加新结果
      $datalist.empty();
      var len = response['records'].length;
      var countries = response['records'];
      for(var i=0; i<len; i++){
          var city = countries[i].city;
          var region = countries[i].region;
          var country = countries[i].country;
          $datalist.append($("<option>").attr('value', city)
            .text(city + ", " + region + ", " + country));
      }
    }
  });
}

优化升级（减少请求频率+避免响应顺序异常） #

增加防抖逻辑，用户停止输入300ms后再发起请求，降低不必要的请求消耗：

// 全局存储防抖定时器，支持多实例同时使用
const citySearchTimer = {};
function findCity(citySearch, j){
  const $datalist = $("#countriesFrom-" + j);
  // 先清除之前的待执行请求
  if (citySearchTimer[j]) clearTimeout(citySearchTimer[j]);

  if (citySearch.length <= 3) {
    $datalist.empty();
    return;
  }

  // 防抖：用户停止输入300ms后再发起请求，可自行调整延迟时长
  citySearchTimer[j] = setTimeout(() => {
    $.ajax({
      url: './api/country/find.php?city=' + encodeURIComponent(citySearch),
      type: 'GET',
      contentType: 'application/json; charset=utf-8',
      dataType: 'JSON',
      success: function(response){
        $datalist.empty();
        var len = response['records'].length;
        var countries = response['records'];
        for(var i=0; i<len; i++){
            var city = countries[i].city;
            var region = countries[i].region;
            var country = countries[i].country;
            $datalist.append($("<option>").attr('value', city)
              .text(city + ", " + region + ", " + country));
        }
      }
    });
  }, 300);
}

异常排查 #

如果修复后仍存在选项无法选中的问题，可在PHP接口中对返回的records结果按city字段去重，避免重复value导致datalist匹配失效。

内容的提问来源于stack exchange，提问作者holly.woo