Обход элемента выбора IOS при создании элемента выбора с помощью JavaScript ⇐ IOS

[Anonymous]

Я пытаюсь визуализировать ответ на вызов API в HTML с помощью JavaScript, создавая элементы option, которые добавляются к элементу select.
HTML

Код: Выделить всё

JavaScript

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
const searchQueryInput = document.getElementById('search_profile_query');
const myDropdown = document.getElementById('id_my_dropdown');
const container = document.getElementById('dropdown-container');

if(searchQueryInput && myDropdown && container){
searchQueryInput.addEventListener('keyup', function() {
const searchTerm = this.value;
fetch(`/get-dropdown-choices/?q=${searchTerm}`).then(response =>
response.json()).then(data => {
myDropdown.innerHTML = '';
data.choices.forEach(choice => {
const option = document.createElement('option');
option.value = choice[0];
option.textContent = choice[1];
myDropdown.appendChild(option);
});
})
.catch(error => console.error('Error:', error));
});

}
});

Он отлично работает на настольном компьютере, но когда я тестирую его с помощью IOS, параметры не заполняются, поскольку управление передается встроенному средству выбора. Элемент выбора HTML отображается пустым. Это проблема, потому что для каждого вызова API (при каждом нажатии клавиши) всплывает средство выбора, и пользователю придется выходить из него каждый раз, когда вводится новая буква, и я бы предпочел не использовать кнопку отправки для вызова API, если я могу помочь. Есть ли решение, которое разработчики используют, чтобы элемент выбора отображался так же, как на рабочем столе, где средство выбора обходит? Решение, которое часто встречается при поиске продуктов или профилей с помощью веб-приложения на iOS?

Подробнее здесь: https://stackoverflow.com/questions/798 ... javascript