Dynamicznie aktualizowana datalist nie pokaże

Question

mam aktualizowania DataList HTML5 dynamicznie, jak typy użytkownika, z następującym scenariuszu:

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

który działa dobrze z tym, że datalist często nie widać od razu . Kiedy sprawdzam element, znajduje się tam html, ale datalista nie jest wyświetlany, gdy tylko zostanie zaktualizowany. Jak mogę go zmusić do pokazania?

Dla przypomnienia: działa ... Po prostu chciałbym, aby od razu wyświetlał nową sugestię.

Answer 1

Myślę, że właśnie znalazłem przyzwoite obejście tego!

Oto mój pseudo-kod:

1. Jak wpisać robię asynchroniczny httprequests aby uzyskać dane.
2. Po zwróceniu danych wyczyściłem i ponownie wypełniłem dane.
3. Jeśli bieżące pole wejściowe jest nadal skupione, ręcznie wywołaj .focus() na elemencie wejściowym (wydaje się to wymuszać pojawienie się wyskakującego okna listy danych).

Answer 2

Proszę użyć sukcesu zamiast wykonanej metody ajax i spróbuj ponownie.

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

Answer 3

Po pierwsze, chciałbym spróbować użyć jednego z już dostępnych rozwiązań, takich jak jQuery UI autocomplete. Skróci to czas twoich prac i sprawi, że kod będzie wolny od typowych błędów (nie wspominając już o tym, że skorzystanie z usług kogoś innego będzie działało w przyszłości).

Jeśli naprawdę chcesz stworzyć własną wersję, chciałbym upewnić się, że lista jest czyszczona i odbudowane z następującego kodu:

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