点击HTML5 Datalist选项时的jQuery事件

我现在有什么

所以我有这个HTML5 Datalist有一堆选项,我有2个事件触发.当用户输出与填充诸如“Rick bross”或“Jack Johnson”(keyup)这样的选项的名称的数组匹配的东西时.当用户开始输入名称时触发的另一个事件,它弹出,用户向下箭头,并点击“输入”(更改).

问题：

当用户单击其中一个下拉选项时,需要一个事件触发,之后他将输出全名,并在对象模糊之前.如果用户在完全输入名称之前单击了一个,则只有在输入模糊时,2个事件才会触发该功能.

标记：

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

解决方法

使用输入事件而不是其他事件.它实际上是为了覆盖你想要的：

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

我做了一个jsfiddle给你试试看.

原文地址：https://www.jb51.cc/html5/168703.html