Javascript Input Datalist 不断添加选项答案

【问题标题】：Javascript Input Datalist keep adding optionsJavascript Input Datalist 不断添加选项
【发布时间】：2021-08-24 12:36:29
【问题描述】：

我在数据库中有一个包含所有城市（大约 41.000）的表，我需要用户选择一个。当输入中的字符大于 3 时，数据列表被填充但结果无法被选中。

我在 PHP 中进行了一个 API 调用，它为填充数据列表的 javascript 提供了一个 JSON。每次触发事件时，数据列表都会不断填充，复制结果。

我知道我肯定遗漏了一部分代码。我使用了一些教程，但没有提到这个问题。我该怎么办？我在下面粘贴了一些代码。

html:

<input name="locationFrom" id="locationFrom" type="text" class="form-control" required="required" autocomplete="off" list="countriesFrom-<?=$i?>" onkeyup="findCity(this.value, <?=$i?>)">
<datalist id="countriesFrom-<?=$i?>"></datalist>

js:

function findCity(citySearch, j){
  if (citySearch.length > 3) {
    $.ajax({
      url: './api/country/find.php?city=' + citySearch,
      type: 'GET',
      contentType: 'application/json; charset=utf-8',
      dataType: 'JSON',
      success: function(response){
          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;
              $("#countriesFrom-" + j).append($("<option >").attr('value', city)
                .text(city + ", " + region + ", " + country));
          }
      }
    });
  }
}

【问题讨论】：

标签： javascript html dom event-handling

【解决方案1】：

如果您将countries 移出findCity() 范围并在调用之前检查数组是否为空，您将获得所需的结果。

var countries = [];

function findCity(citySearch, j){
  if (!countries && citySearch.length > 3) {
    $.ajax({
      url: './api/country/find.php?city=' + citySearch,
      type: 'GET',
      contentType: 'application/json; charset=utf-8',
      dataType: 'JSON',
      success: function(response){
          var len = response['records'].length;
          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;
              $("#countriesFrom-" + j).append($("<option >").attr('value', city)
                .text(city + ", " + region + ", " + country));
          }
      }
    });
  }
}

如果您想用每个 char 输入刷新列表，只需在调用之前清除数组并再次填充（您也必须重新绘制 HTML）。

var countries = [];

function findCity(citySearch, j){
  if (citySearch.length > 3) {
    countries = [];
   
    ...
  }
}

【讨论】：

我用过这个文档。getElementById(elementId).innerHTML = '';并在 citySearch >3 时清除数组，因此如果删除字符，它不会被刷新。我现在的问题是该元素没有被选中。如果我选择一个元素或按 Enter，它会继续进行搜索。另外，如果只有一个元素，我会得到两次。

【解决方案2】：

回答我自己的问题，但可能对某人有用：

每次字符 > 3 我都会这样做：

  if (citySearch.length > 3) {
    var countries = [];
    document.getElementById(elementId).innerHTML = '';
    ...
}

elementId 当然是我的数据列表。

【讨论】：