在焦点上异步填充数据列表选项(获取)

Question

这样做的目的是在获取数据之前不显示数据列表。

此更新列表可用于第二个焦点。

如何让它在第一个焦点上工作

https://codesandbox.io/s/modern-frost-kck0d?file=/src/index.js

<input id="input" list="list" />
<datalist id="list">
<option data-id="1" value="option 1"></option>
<option data-id="2" value="option 2"></option>
<option data-id="3" value="option 3"></option>
</datalist>

document.getElementById("input").addEventListener("focus", () => {
let datalist = document.getElementById("list");
datalist.innerHTML = "";
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => {
data.map(item => {
let option = document.createElement("option");
option.setAttribute("data-id", item.id);
option.value = item.name;
datalist.appendChild(option);
});
})
.catch(err => err);
});

Answer 1

这在datalist上是一个非常奇怪的行为，我能够让它工作，但它不是非常简单，需要一些变通方法。

目前，只有当ajax调用在焦点触发之前做出响应时，它才能工作

var padded = document.querySelector("#padded");
var input = document.querySelector("#input");
input.addEventListener("mouseover", evt => evt.stopImmediatePropagation());
padded.addEventListener("mouseover", async evt => {
console.log(evt.currentTarget);
let datalist = document.getElementById("list");
datalist.innerHTML = "";
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await response.json();
data.forEach(item => {
let option = document.createElement("option");
option.setAttribute("data-id", item.id);
option.value = item.name;
datalist.appendChild(option);
});
console.log("responded");
});

body {
font-family: sans-serif;
}
#padded {
border: 1px solid black;
display: inline-block;
padding: 20px;
}

<div id="padded">
<input id="input" list="list" />
<datalist id="list">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>
</div>