jQuery evento quando l'opzione HTML5 Datalist viene cliccato

Question

Quello che ho adesso:

Quindi ho questa HTML5 Datalist con una serie di opzioni in esso, e ho 2 eventi di cottura. Uno quando l'utente digita qualcosa che corrisponde a qualcosa della serie di nomi che sta popolando le opzioni come "Rick Bross" o "Jack Johnson" (keyup). Un altro evento che si attiva quando un utente inizia a digitare il nome, si apre, le frecce dell'utente verso il basso e fa clic su "invio" (modifica).

Il problema:

ho bisogno di un evento al fuoco quando l'utente fa clic su uno dei opzioni verso il basso, prima che i tipi il nome completo, e prima che l'oggetto è sfocata. Se un utente fa clic su uno proprio prima che il nome sia completamente digitato, i 2 eventi attivano la funzione solo quando l'input è sfocato.

Il Markup:

<datalist id="potentials"> 
    <option value="Rick Bross"> 
    <option value="Jack Johnson"> 
    <option value="Rick Bross"> 
    <option value="Rick Bross"> 
</datalist> 

eventi e funzioni JavaScript:

window.checkModelData = function(ele) 
{ 
    var name = $(ele).val().replace(" ", ""); 
    var mod = potentialModels[name]; 
    if(mod) { 
     loadModelData(name); 
    } 
} 

function loadModelData(name) { 
    var mod = potentialModels[name]; 
    $("#address").val(potentialModels[name].address); 
    $("#city").val(potentialModels[name].city); 
    $("#state").val(potentialModels[name].state); 
    $("#email").val(potentialModels[name].email); 
    $("#phone").val(potentialModels[name].phone); 
    $("#zip").val(potentialModels[name].zip); 
} 

$("#name").keyup(function(){ 

    window.checkModelData(this); 

}); 
$("#name").change(function(){ 

    window.checkModelData(this); 
}); 

Answer 1

utilizzare l'evento input invece degli altri eventi. In realtà è stato progettato per coprire quello che si vuole:

$("#name").bind('input', function() { 
    window.checkModelData(this); 
}); 

Ho fatto una jsfiddle per voi di provarlo.

Answer 2

È anche possibile ascoltare l'evento 'select' nel campo di input.

$('#name').bind('select', function() { 
    // handle input value change 
}); 

Answer 3

Per gestire l'evento click only, ecco la soluzione.

$("#book_search").bind('select', function() { 
    alert("changed"); 
});