移动设备上自定义下拉列表不显示的解决方案：HTML结构与JS渲染指南

<div id="departure_airport_dropdown" style="display: block;">
  <div> <!-- 错误的嵌套层级或父元素类型 -->
    <option value="STR">Stuttgart</option>
  </div>
</div>

<select id="departure_airport_dropdown" style="display: block;">
  <option value="STR">Stuttgart</option>
  <option value="FRA">Frankfurt</option>
  <!-- 更多选项 -->
</select>

function showMatchingAirports(searchTerm, targetDropdown) {
  // ... 其他逻辑 ...

  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添加到目标div中
      targetDropdown.style.display = 'block';
      // ... 事件监听逻辑 ...
    }
  };
  // ... 其他逻辑 ...
}

function showMatchingAirports(searchTerm, targetDropdownContainer) { // 将参数名改为 targetDropdownContainer 更清晰
  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);

      // 清空旧内容
      targetDropdownContainer.innerHTML = '';

      // 创建一个 <select> 元素作为真正的下拉列表
      var selectElement = document.createElement('select');
      // 可以为 select 元素添加一个 class 或 id 以便样式控制
      selectElement.className = 'autocomplete-dropdown-select';

      // 遍历数据，为 select 元素创建 option
      for (var i = 0; i < airports.length; i++) {
        var option = document.createElement('option');
        option.value = airports[i].iata_code;
        option.textContent = airports[i].name;
        selectElement.appendChild(option); // 将 option 添加到 select 元素中
      }

      // 将创建好的 select 元素添加到目标容器 div 中
      targetDropdownContainer.appendChild(selectElement);
      targetDropdownContainer.style.display = 'block';

      // 为 select 元素添加 change 事件监听，或者为 option 添加 click 事件监听
      // 注意：select 元素的 option 通常通过 change 事件处理，而不是 click
      selectElement.addEventListener('change', function() {
        var selectedValue = this.value;
        var inputField = targetDropdownContainer.previousElementSibling;
        inputField.value = selectedValue;
        targetDropdownContainer.style.display = 'none';
      });

      // 如果需要模拟点击 option 的行为（不推荐，因为select有自己的交互方式）
      // var dropdownOptions = selectElement.getElementsByTagName('option');
      // for (var j = 0; j < dropdownOptions.length; j++) {
      //   dropdownOptions[j].addEventListener('click', function() {
      //     var selectedValue = this.value;
      //     var inputField = targetDropdownContainer.previousElementSibling;
      //     inputField.value = selectedValue;
      //     targetDropdownContainer.style.display = 'none';
      //   });
      // }
    }
  };
  xhttp.open('GET', '<?php echo plugin_dir_url(__FILE__); ?>get_matching_airports.php?search_term=' + searchTerm, true);
  xhttp.send();
}

// 事件绑定部分保持不变，但要理解 targetDropdown 现在是一个 div 容器
document.getElementById('departure_airport').addEventListener('input', function() {
    var searchTerm = this.value.trim();
    var targetDropdownContainer = document.getElementById('departure_airport_dropdown');
    showMatchingAirports(searchTerm, targetDropdownContainer);
});

document.getElementById('destination_airport').addEventListener('input', function() {
    var searchTerm = this.value.trim();
    var targetDropdownContainer = document.getElementById('destination_airport_dropdown');
    showMatchingAirports(searchTerm, targetDropdownContainer);
});

<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> <!-- 这个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> <!-- 这个div是容器 -->

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

<?php
$json_file_path = dirname(__FILE__) . '/airports.json';
$json_data = file_get_contents($json_file_path);
$airports = json_decode($json_data, true);

$search_term = isset($_GET['search_term']) ? $_GET['search_term'] : '';

$matching_airports = array();

foreach ($airports as $airport) {
    if (stripos($airport['name'], $search_term) === 0) {
        $matching_airports[] = $airport;
    }
}

header('Content-Type: application/json');
echo json_encode($matching_airports);
exit;
?>