html - 动态更新的数据列表不会显示

Question

当用户键入时，我正在使用以下脚本动态更新 html5 数据列表：

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

效果很好，只是数据列表通常不会立即显示。当我检查元素时，html 就在那里，但数据列表不会在更新后立即显示。我怎样才能强制它显示？

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

Answer 1

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

这是我的伪代码：

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

Answer 2

请使用成功而不是ajax 的done 方法，然后重试。

$('#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);
  });
});