我现在有什么
所以我有这个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给你试试看.