如何使用JavaScript刷新HTML5数据表?
作者:互联网
我正在动态地将选项加载到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不是问题,因为它似乎在更新选项时自动刷新列表.
UPDATE
我不确定这个问题是否有令人满意的答案,因为我认为这只是某些浏览器的缺点.如果更新了数据列表,浏览器应刷新列表,但某些浏览器(包括Chrome和Opera)根本不这样做.黑客?
解决方法:
相当长的一段时间后,我找到了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个).
标签:javascript,jquery,html5,ajax,html-datalist 来源: https://codeday.me/bug/20190929/1830739.html