动态更新的数据列表不会显示答案

【问题标题】：Dynamically updated datalist won't show动态更新的数据列表不会显示
【发布时间】：2013-05-18 20:56:11
【问题描述】：

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

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

这很好用，只是数据列表通常不会立即显示。当我检查元素时，html 就在那里，但数据列表不会在更新后立即显示。如何强制显示？

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

【问题讨论】：

你能解决这个问题吗？我现在也开始为此苦苦挣扎。

标签： html forms autocomplete html-datalist

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

这是我的伪代码：

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

【讨论】：

【解决方案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);
  });
});

【讨论】：