Динамически обновляемый информатор не покажет

Я обновляю datist html5 динамически, как пользовательский тип, со следующим script:

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

Это работает отлично, за исключением того, что datalist часто не показывает сразу. Когда я проверяю элемент, там находится html, но datalist не отображается, как только он обновляется. Как я могу заставить его показать?

Для записи: это работает... Я просто хочу, чтобы он всегда показывал новое предложение сразу.

Ответ 1

Я думаю, что просто нашел подходящее обходное решение для этого!

Вот мой псевдокод:

Как я печатаю, я делаю async httprequests для получения данных.
Когда данные возвращаются, я очищаю и повторно заполняю datalist.
Если текущее поле ввода все еще сфокусировано, вызовите . focus() на элемент ввода (это, похоже, заставляет список данных всплывающее поведение).

Ответ 2

Используйте успешный метод вместо метода ajax и повторите попытку.

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

Ответ 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);
  });
});