如何在 html 中弹出输入标签的数据列表选项

Question

我目前正在尝试将 html 中的输入文本字段添加到我的数据列表中。 我这样做的方法是从后端检索文本并在 datalist 中动态生成选项，但是，在我在前端检索所有文本并为 datalist 生成选项之后，只有一个选项显示而不是全部。

这是我向数据列表添加选项的方式：

async function getSuggestedWords(event) {
    let datalist = document.getElementById("suggestions");
    let text = document.getElementById("q").value;
    let http = new XMLHttpRequest();
    http.responseType = "json";
    // let str = "";
    http.onload = async function() {
        if (this.readyState == 4) {
            let  {suggestions}   = http.response;

            for (let suggest of suggestions) {
                console.log(suggest.term);
                let s = document.createElement('option');
                s.setAttribute("value", suggest.term);
                datalist.appendChild(s);
            }
        }
    }

    const url = `http://localhost:8080/api/suggest?q=${text}`;
    await http.open("GET", url);
    await http.send();
}

这是我的 html：

        <label for="q">Input</label>
        <input type="text" name="q" id="q" list="suggestions" onchange="getSuggestedWords(event)" autocomplete="on">
        <datalist id="suggestions">
        </datalist>

Answer 1

您实际上并不需要 js 来执行此操作。 例如，我在这里使用 jinja 2 模板来填写我的选项列表。

{% for item in db.subkeys %}<option>{{item}}</option>{% endfor %}

我将 db.subkeys 作为字符串列表传入的地方。

Answer 2

您可以使用.map原型

 datalist.innerHTML = suggestions.map((suggest, index) => { return `<option value="${index}">${suggest.term}</option>` })