jQuery kiện khi tùy chọn HTML5 DataList được nhấp

Question

Những gì tôi có bây giờ:

Vì vậy, tôi có HTML5 DataList này với một loạt các tùy chọn trong nó, và tôi có 2 sự kiện bắn. Một khi người dùng loại ra một cái gì đó phù hợp với một cái gì đó mảng tên mà là cư các tùy chọn như "Rick Bross" hoặc "Jack Johnson" (keyup). Một sự kiện khác xảy ra khi người dùng bắt đầu nhập tên, nó sẽ bật lên, người dùng mũi tên xuống và nhấn "enter" (thay đổi).

Vấn đề:

Tôi cần một sự kiện để bắn khi người dùng nhấp một trong những đơn thả xuống tùy chọn, trước khi ông loại đầy đủ tên ra, và trước khi đối tượng là bị mờ. Nếu người dùng nhấp vào một ngay bây giờ trước khi tên được nhập hoàn toàn, 2 sự kiện chỉ kích hoạt chức năng khi đầu vào bị làm mờ.

Các Markup:

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

Javascript sự kiện và chức năng:

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

Sử dụng các sự kiện input thay vì các sự kiện khác. Nó thực sự được thiết kế để bao gồm những gì bạn muốn:

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

Tôi đã thực hiện jsfiddle để bạn dùng thử.

Answer 2

Bạn cũng có thể nghe sự kiện 'chọn' trên trường nhập.

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

Answer 3

Để xử lý sự kiện chỉ nhấp chuột ở đây là giải pháp.

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