单击 HTML5 Datalist 选项时的 jQuery 事件

新手上路,请多包涵

我现在拥有的:

所以我有这个 HTML5 数据列表,里面有很多选项,我有 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);
});

原文由 Rick Bross 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 621
1 个回答

使用 input 事件代替其他事件。它实际上旨在涵盖您想要的内容:

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

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

原文由 likeitlikeit 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题