jQuery event when HTML5 Datalist option is clicked

问题

What I have now:

So i have this HTML5 Datalist with a bunch of options in it, and I have 2 events firing. One when the user types out something that matches something the array of names that is populating the options such as "Rick Bross" or "Jack Johnson" (keyup). Another event that fires when a user starts typing the name, it pops up, the user arrows down, and hits "enter" (change).

The problem:

I need an event to fire when the user clicks one of the drop down options, BEFORE he types the full name out, and before the object is blurred. If a user clicks one right now before the name is completely typed out, the 2 events only fire the function once the input is blurred.

The Markup:

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

Javascript events and functions:

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);
});

回答1:

Use the input event instead of the other events. It's actually designed to cover what you want:

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

I made a jsfiddle for you to try it out.

回答2:

You can also listen to the 'select' event on the input field.

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

回答3:

To handle click only event here is the solution.

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

来源：https://stackoverflow.com/questions/16027746/jquery-event-when-html5-datalist-option-is-clicked

标签

jquery

html5

option

html-datalist