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

<form method="post" id="flight_form" action="">
    <label for="flight_number">Flight Number:</label>
    <input type="text" id="flight_number" name="flight_number">

    <label for="departure_airport">Departure Airport:</label>
    <input type="text" id="departure_airport" name="departure_airport" autocomplete="off" required>
    <div id="departure_airport_dropdown" style="display: none;"></div> <!-- 下拉列表容器 -->

    <label for="destination_airport">Destination Airport:</label>
    <input type="text" id="destination_airport" name="destination_airport" autocomplete="off" required>
    <div id="destination_airport_dropdown" style="display: none;"></div> <!-- 下拉列表容器 -->

    <input type="submit" name="submit" id="send-button" value="Send" onclick="calculateDistance(); return false;">
</form>

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);
});
// ... 另一个输入框的监听器 ...

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

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. 创建一个 <select> 元素作为下拉列表的主体
      var selectElement = document.createElement('select'); 
      selectElement.className = 'autocomplete-select'; // 添加类名以便样式控制
      selectElement.size = Math.min(airports.length, 5); // 设置可见行数，使其表现更像列表，最多5行
      selectElement.style.width = '100%'; // 样式调整，使其占据父容器宽度
      selectElement.style.position = 'absolute'; // 确保其可以相对于父元素定位
      selectElement.style.zIndex = '1000'; // 确保其在其他元素之上显示
      selectElement.style.border = '1px solid #ccc'; // 添加边框
      selectElement.style.backgroundColor = '#fff'; // 背景色

      // 2. 遍历机场数据，为 <select> 元素创建 <option>
      if (airports.length === 0) {
          var noResultsOption = document.createElement('option');
          noResultsOption.textContent = '无匹配结果';
          noResultsOption.disabled = true; // 禁用此选项
          selectElement.appendChild(noResultsOption);
      } else {
          for (var i = 0; i < airports.length; i++) {
              var option = document.createElement('option'); 
              option.value = airports[i].iata_code;
              option.textContent = airports[i].name + ' (' + airports[i].iata_code + ')'; // 显示更多信息
              selectElement.appendChild(option); 
          }
      }

      // 3. 清空原容器，并插入新的 <select> 元素
      targetDropdownContainer.innerHTML = ''; 
      targetDropdownContainer.appendChild(selectElement); 
      targetDropdownContainer.style.display = 'block'; 

      // 4. 为 <select> 元素添加 change 事件监听器，处理用户选择
      selectElement.addEventListener('change', function() {
        var selectedValue = this.value;
        // var selectedText = this.options[this.selectedIndex].textContent; // 如果需要显示文本而非值
        var inputField = targetDropdownContainer