jquery - 单击 HTML5 Datalist 选项时的 jQuery 事件

Question

我现在拥有的：

所以我有这个 HTML5 数据列表，里面有很多选项，我有 2 个事件触发。当用户键入与填充选项的名称数组匹配的内容时，例如“Rick Bross”或“Jack Johnson”（keyup）。当用户开始输入名称时触发的另一个事件，它会弹出，用户向下箭头，然后点击“输入”（更改）。

问题：

当用户单击其中一个下拉选项，在他输入全名之前以及在对象模糊之前，我需要一个事件来触发。如果用户在完全输入名称之前立即单击一个，则这两个事件仅在输入模糊时触发该函数。

标记：

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

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

使用该input事件而不是其他事件。它实际上旨在涵盖您想要的内容：

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

我制作了一个jsfiddle供您试用。

Answer 2

您还可以在输入字段上收听“选择”事件。

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

Answer 3

在这里处理仅点击事件是解决方案。

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