我遇到了一个自动完成下拉列表的问题,在我的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。
1条答案
按热度按时间gopyfrb31#
我偶然发现了你的“选择”元素:您刚刚创建了一个包含选项的div-这在移动的设备上不起作用:
只需在iPhone和桌面上打开上面的片段。在你的桌面上,你应该看到两个元素,在你的iPhone上,你只会看到正确的版本。
我认为这是因为特定的元素被转换为iOS设计组件。在您的情况下,系统不会将您的“select”识别为有效元素。