Dynamically updated datalist won't show

Question

I'm updating an html5 datalist dynamically, as the user types, with the following script:

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

Which works fine except that the datalist often doesn't show right away. When I inspect the element the html is there but the datalist is not shown as soon as it's updated. How can I force it to show?

For the record: it works... I just wish it would always show the new suggestion right away.

Answer 1

Please use success instead of done method of ajax and try again.

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

Answer 2

I think I just have found a decent workaround for this!

Here is my pseudo-code:

1. As I type, I make async httprequests to get data.
2. When data is returned, i clear and re-populate the datalist.
3. If the current input field is still focused, manually call .focus() on the input element (this seems to force the data-list popup behavior to occur).