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

Question

我正在datalist动态地将选项加载到HTML5 元素中.但是,浏览器会尝试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不是问题,因为它似乎在更新选项时自动刷新列表.

UPDATE

我不确定这个问题是否有令人满意的答案,因为我认为这只是某些浏览器的缺点.如果a 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）。

Answer 2

将 #ingredients 元素放入 #container 内并尝试以下代码：

$.ajax({
    url: "/api/ingredients",
    data: {search: value.length > 0 ? value + "*" : ""},
    success: function(ingredients) {
        $("#ingredients").remove();
        var item = $('<datalist id="ingredients"></datalist>');
        for (var i in ingredients) {                
            item.append("<option>"+ ingredients[i].name +"</option>");
        }
        item.appendTo('#container');
    }
});

没有 #container 并使用 jQuery ReplaceWith() 甚至更好：

$.ajax({
    url: "/api/ingredients",
    data: {search: value.length > 0 ? value + "*" : ""},
    success: function(ingredients) {
        var item = $('<datalist id="ingredients"></datalist>');
        for (var i in ingredients) {                
            item.append("<option>"+ ingredients[i].name +"</option>");
        }
        $("#ingredients").replaceWith(item);
    }
});