Question

我正在使用以下脚本动态更新html5 datalist：

$('#place').on('keyup', function() {
    $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) {
        $('#autocomp-places').html(response);
    });
});

除了数据主义者通常不会立即显示之外，哪个工作正常。当我检查元素时，html就在那里，但是数据列表一更新就不会显示。我怎么强迫它显示？

记录：它有效...我只是希望它能够立即显示新的建议。

Answer 1

我想我刚刚为此找到了一个不错的解决方法！

这是我的伪代码：

在我输入时，我会使用异步httprequests来获取数据。
返回数据时，我清除并重新填充数据列表。
如果仍然关注当前输入字段，请在输入元素上手动调用.focus()（这似乎会强制发生数据列表弹出行为）。

Answer 2

请使用成功而不是完成ajax的方法，然后再试一次。

$('#place').on('keyup', function () {
    $.post('content/php/autocomp.php', {
        field: 'plaats',
        val: $('#place').val()
    }).success(function (response) {
        $('#autocomp-places').html(response);
    });
});

Answer 3

首先，我会尝试使用已有的解决方案，例如jQuery UI autocomplete。它将缩短您的开发时间，使代码免于典型的错误（更不用说将来从其他人那里获得好处）。

如果你真的想创建自己的版本，我会确保列表被清除并重新填充以下代码：

$('#place').on('keyup', function() {
  var posting = $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() });
  posting.done(function(data) {
    $('#autocomp-places').empty().append(data);
  });
});

动态更新的datalist将不会显示

3 个答案: