我遇到了一个自动完成下拉列表的问题，在我的WordPress插件中无法在iPhone上工作。页面本身基于元素。
下拉列表没有显示在移动的设备上，尽管我可以看到控制台中显示的不同。我实现了一个js-function，它从一个. json文件中获取数据，根据用户输入填充下拉列表。我已经验证了该问题与CSS或Elementor无关。可能是因为createElement函数没有正确使用吗？任何关于如何解决这个问题的见解或建议将不胜感激。
链接到表单：www.cleverlaw.de/elementor-1470
第二个和最后一个字段受到影响。
先谢谢你了！
我试着把电脑上的用户代理切换到iPhone/Safari，结果成功了。但是，如果我将iPhone上Safari中的用户代理切换到macOS/Chrome，它就不起作用了。
这是一种形式：

<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>

这就是js-function：

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'); 
      
      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); 
      }
      
      targetDropdown.innerHTML = ''; 
      targetDropdown.appendChild(dropdown); 
      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';
        });
      }
    }
  };
  xhttp.open('GET', '<?php echo plugin_dir_url(__FILE__); ?>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);
});

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

这是get-matching-airports.php：

<?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;
?>

我尝试了不同的用户代理和浏览器，并检查了CSS。