zdarzenie jQuery gdy opcja HTML5 DataList kliknięciu

Question

Co mam teraz:

Więc mam ten HTML5 DataList z wieloma opcjami w nim i mam 2 zdarzenia wypalania. Jeden, gdy użytkownik wypisuje coś, co pasuje do tablicy nazw, które wypełniają opcje takie jak "Rick Bross" lub "Jack Johnson" (keyup). Kolejne zdarzenie, które uruchamia się, gdy użytkownik zaczyna wpisywać nazwę, wyskakuje, strzałki użytkownika w dół i uderza "wprowadź" (zmień).

Problem:

muszę zdarzenie na ogień, gdy użytkownik kliknie jeden z rozwijanej opcji, zanim typy pełna nazwa, i zanim obiekt jest nieostry. Jeśli użytkownik kliknie teraz, zanim nazwa zostanie całkowicie wypisana, 2 zdarzenia wywołają tę funkcję tylko wtedy, gdy wejście zostanie zamazane.

znaczników:

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

zdarzenia JavaScript i funkcje:

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

Użyj zdarzenie input zamiast innych wydarzeń. To faktycznie przeznaczone na pokrycie co chcesz:

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

Zrobiłem jsfiddle, aby go wypróbować.

Answer 2

Można również odsłuchać zdarzenie "wybierz" w polu wprowadzania.

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

Answer 3

Do obsługi zdarzenia "kliknij tylko" tutaj jest rozwiązanie.

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