移动端自动完成下拉列表显示异常：HTML语义化与iOS兼容性修复

    Flight Number:
    

相关的JavaScript函数负责从后端获取数据并动态生成下拉列表：

function showMatchingAirports(searchTerm, targetDropdown) {
  if (searchTerm.length < 2) {
    targetDropdown.innerHTML = '';
    targetDropdown.style.display = 'none';
    return;
  }

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var airports = JSON.parse(this.responseText);
      var dropdown = document.createElement('div'); // 错误点：使用 div 作为选项容器

      for (var i = 0; i < airports.length; i++) {
        var option = document.createElement('option'); 
        option.value = airports[i].iata_code;
        option.textContent = airports[i].name;
        dropdown.appendChild(option); // 将 option 放入 div 中
      }

      targetDropdown.innerHTML = ''; 
      targetDropdown.appendChild(dropdown); // 将包含 option 的 div 放入目标容器
      targetDropdown.style.display = 'block'; 

      var dropdownOptions = dropdown.getElementsByTagName('option');
      for (var j = 0; j < dropdownOptions.length; j++) {
        dropdownOptions[j].addEventListener('click', function() {
          var selectedValue = this.value;
          var inputField = targetDropdown.previousElementSibling;
          inputField.value = selectedValue;
          targetDropdown.style.display = 'none';
        });
      }
    }
  };
  // ... AJAX 请求部分 ...
  xhttp.open('GET', 'get_matching_airports.php?search_term=' + searchTerm, true);
  xhttp.send();
}

// 事件监听器
document.getElementById('departure_airport').addEventListener('input', function() {
    var searchTerm = this.value.trim();
    var targetDropdown = document.getElementById('departure_airport_dropdown');
    showMatchingAirports(searchTerm, targetDropdown);
});
// ... 另一个输入框的监听器 ...

2. 代码审查与问题根源

仔细分析上述JavaScript代码，问题症结在于showMatchingAirports函数中动态创建下拉列表的方式：

立即学习“前端免费学习笔记（深入）”；

var dropdown = document.createElement('div'); // 错误点
// ...
dropdown.appendChild(option); // 将  元素添加到 
 中

这里，开发者创建了一个

LongShot

LongShot 是一款 AI 写作助手，可帮助您生成针对搜索引擎优化的内容博客。

下载

function showMatchingAirports(searchTerm, targetDropdownContainer) { // targetDropdownContainer 指的是 HTML 中的 div#departure_airport_dropdown
  if (searchTerm.length < 2) {
    targetDropdownContainer.innerHTML = '';
    targetDropdownContainer.style.display = 'none';
    return;
  }

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var airports = JSON.parse(this.responseText);

      // 1. 创建一个