datalist dinamicamente aggiornato non mostrerà

Question

sto aggiornando un DataList HTML5 in modo dinamico, come i tipi di utenti, con il seguente script:

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

che funziona bene tranne che il datalist spesso non mostra subito . Quando controllo l'elemento, l'html è presente ma il datalist non viene mostrato non appena viene aggiornato. Come posso forzarlo a mostrare?

Per la cronaca: funziona ... vorrei solo che mostrasse subito il nuovo suggerimento.

Answer 1

Penso di aver trovato una soluzione decente per questo!

Ecco il mio pseudo-codice:

1. Come ho tipo, io faccio asincrona httprequests per ottenere i dati.
2. Quando i dati vengono restituiti, si cancella e riopopola il datalist.
3. Se il campo di input corrente è ancora a fuoco, chiamare manualmente .focus() sull'elemento di input (ciò sembra forzare il comportamento di popup dell'elenco di dati che si verifica).

Answer 2

Si prega di utilizzare il metodo invece di fare ajax e riprovare.

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

Answer 3

In primo luogo, vorrei provare ad utilizzare una delle soluzioni già disponibili, come il jQuery UI autocomplete. Ridurrà i tempi di sviluppo e renderà il codice libero da bug tipici (per non parlare del fatto che i benefici derivanti da qualcun altro funzioneranno in futuro).

Se davvero si vuole creare la propria versione, vorrei fare che l'elenco viene cancellato e ripopolata con il seguente codice:

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