Javascript 输入数据列表继续添加选项

Question

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

我在 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));
          }
      }
    });
  }
}

Answer 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));
          }
      }
    });
  }
}

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

var countries = [];

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

Answer 2

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

每当字符数大于 3 时，我都会这样做：

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

其中elementId当然是我的datalist。

Javascript 输入数据列表继续添加选项

Javascript Input Datalist keep adding options

html

javascript

dom

event-handling