javascript - 如何使用 JavaScript 刷新 HTML5 数据列表？

Question

我正在将选项动态加载到 HTML5 datalist 元素中。但是，浏览器会在加载选项之前尝试显示 datalist。这会导致列表未显示或有时会显示部分列表。加载选项后，是否可以通过 JavaScript 刷新列表？

HTML

<input type="text" id="ingredient" list="ingredients">
<datalist id="ingredients"></datalist>

JavaScript

$("#ingredient").on("keyup", function(event) {
    var value = $(this).val();
    $.ajax({
        url: "/api/ingredients",
        data: {search: value.length > 0 ? value + "*" : ""},
        success: function(ingredients) {
            $("#ingredients").empty();
            for (var i in ingredients) {
                $("<option/>").html(ingredients[i].name).appendTo("#ingredients");
            }
            // Trigger a refresh of the rendered datalist
        }
    });
});

注意:在 Chrome 和 Opera 中，只有当用户在输入文本后单击输入时，才会显示整个列表。但是，我希望整个列表 显示为用户类型。 Firefox 不是问题，因为它似乎会在更新选项时自动刷新列表。

更新

我不确定这个问题是否有令人满意的答案，因为我认为这只是某些浏览器的缺点。如果 datalist 被更新，浏览器应该刷新列表，但有些浏览器(包括 Chrome 和 Opera)根本不这样做。黑客？

Answer 1

经过很长时间的提问，但我找到了适用于 IE 和 Chrome 的解决方法(未在 Opera 上测试，但已经适用于 Firefox)。

解决方案是将输入集中在成功(或完成)函数的末尾，如下所示:

$("#ingredient").on("keyup", function(event) {
var _this = $(this);
var value = _this.val();
$.ajax({
    url: "/api/ingredients",
    data: { search: value.length > 0 ? value + "*" : "" },
    success: function(ingredients) {
        $("#ingredients").empty();
        for (var i in ingredients) {
           $("<option/>").html(ingredients[i].name).appendTo("#ingredients");
        }
        // Trigger a refresh of the rendered datalist
        // Workaround using focus()
        _this.focus();
    }
});

它适用于 Firefox、Chrome 和 IE 11+(可能是 10)。