Selezione nell'Elenco sorgenti Modificato eventi

Question

Ho questo esempio:

<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Google Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

Ho bisogno di prendere un evento, quando l'utente seleziona l'opzione (con mouse o tastiera).

Ho provato a fare onchange = "MySuperFunction();" ma funziona solo quando un elemento è selezionato e quindi l'elenco non è focalizzato.

Answer 1

L'evento input dovrebbe funzionare per quello che ti serve. Come ho capito, non è possibile utilizzare direttamente un datalist, ma è collegato a un input dall'attributo list. Questo legame evento avrebbe continuato a quell'ingresso:

document.getElementById('browsers-input').addEventListener('input', function() { 
    console.log('changed'); 
}); 

http://jsfiddle.net/vccfv/

Answer 2

Usin jQuery si potrebbe usare .changehttp://jquery.com/

$('datalist#browsers').change(MySuperFunction); 

o

$('datalist#browsers').change(function(){ 
    // stuff 
}); 

Answer 3

per ottenere lo stesso effetto di "Pillole di esplosione" soluzione con stile JQuery:

$("#browsers-input").on("input", MySuperFunction);