У меня есть ввод текста со списком данных, который динамически заполняется по типам пользователей. Кажется, это работает - когда я печатаю, я вижу в инспекторе DOM, что элемент datalist заполняется option s. Однако раскрывающееся окно, которое должно позволить пользователю выбрать option, не появляется. Есть ли какие-нибудь javascript, которые я могу использовать, чтобы заставить его появиться?
<html>
<body>
<input type="text" name="brand" id="brand_input" list="brand_list" oninput="handleInput(this)" placeholder="Brand">
<datalist id="brand_list"></datalist>
</body>
<script>
window.addEventListener("load", function() {
window.inputXHR = new XMLHttpRequest();
});
function handleInput(input) {
var list = input.list;
window.inputXHR.abort();
window.inputXHR.onreadystatechange = function() {
if (window.inputXHR.readyState === XMLHttpRequest.DONE) {
var status = window.inputXHR.status;
if (status == 0 || (status >= 200 && status < 400)) {
list.innerHTML = "";
var resp = JSON.parse(window.inputXHR.responseText);
resp.forEach(function(i) {
var opt = document.createElement("option");
opt.value = i;
list.appendChild(opt);
});
// These two lines fix the issue:
document.getElementById("otherelement").focus();
input.focus();
}
}
};
window.inputXHR.open("GET", "/get_brand/"+input.value, true);
window.inputXHR.send();
}
</script>
</html>
e: Я обнаружил, что фокусировка вдали от текстового поля, а затем повторная фокусировка устраняет проблему. Я добавил пару строк в свой код выше, которые делают это автоматически после загрузки списка данных.