WordPress Elementor插件iPhone端自动补全下拉列表不显示求助

问题描述 #

在Elementor搭建的WordPress插件中，表单的机场自动补全下拉列表在iPhone设备上无法显示，但浏览器控制台能看到后端返回的正确数据。该功能通过JS函数从JSON文件获取数据，根据用户输入填充下拉列表。已排除CSS及Elementor本身的问题，测试发现：

• 桌面端切换iPhone/Safari用户代理时功能正常
• iPhone端Safari切换macOS/Chrome用户代理仍无法使用
• 受影响的是表单中第二个（出发机场）和最后一个（到达机场）字段

相关代码 #

表单HTML代码 #

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

后端PHP代码（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;
?>

排查思路与解决建议 #

核心问题分析 #

真机UA切换无效、桌面端模拟正常，说明问题并非用户代理判断，而是iPhone Safari的原生渲染/交互特性导致——当前用<option>元素作为下拉选项，而<option>是为<select>标签设计的，直接嵌套在<div>中会触发移动端Safari的渲染异常。

具体修复方案 #

1. 替换<option>为普通<div>元素
   将动态创建的<option>改为<div>，用data-*属性存储机场代码，同时添加类名便于样式控制：

   // 修改创建选项的代码
   for (var i = 0; i < airports.length; i++) {
     var option = document.createElement('div'); 
     option.className = 'dropdown-option'; // 添加类名
     option.dataset.value = airports[i].iata_code; // 用data属性存值
     option.textContent = airports[i].name;
     dropdown.appendChild(option); 
   }
   
   // 修改点击事件取值逻辑
   dropdownOptions[j].addEventListener('click', function() {
     var selectedValue = this.dataset.value; // 从data属性取值
     var inputField = targetDropdown.previousElementSibling;
     inputField.value = selectedValue;
     targetDropdown.style.display = 'none';
   });
   

   同时给.dropdown-option添加基础CSS确保可交互：

   .dropdown-option {
     padding: 8px 12px;
     cursor: pointer;
     border-bottom: 1px solid #eee;
   }
   .dropdown-option:hover {
     background-color: #f5f5f5;
   }
   

2. 兼容移动端触摸事件
   iPhone Safari对动态创建元素的click事件支持有限，添加touchstart事件监听确保交互生效：

   // 提取点击处理函数复用
   function handleOptionSelect() {
     var selectedValue = this.dataset.value;
     var inputField = targetDropdown.previousElementSibling;
     inputField.value = selectedValue;
     targetDropdown.style.display = 'none';
   }
   
   // 同时绑定click和touchstart事件
   for (var j = 0; j < dropdownOptions.length; j++) {
     dropdownOptions[j].addEventListener('click', handleOptionSelect);
     dropdownOptions[j].addEventListener('touchstart', handleOptionSelect);
   }
   

3. 强制触发重绘
   移动端Safari有时会延迟渲染动态内容，在显示下拉容器后添加强制重绘代码：

   targetDropdown.style.display = 'block';
   // 触发重绘
   targetDropdown.offsetHeight;
   

4. 检查层级与定位
   确保下拉容器的z-index足够高，避免被其他元素遮挡：

   #departure_airport_dropdown, #destination_airport_dropdown {
     position: relative;
     z-index: 9999;
     background: white;
     border: 1px solid #ddd;
   }
   

内容的提问来源于stack exchange，提问作者waltlin