单击 HTML5 数据列表选项时的 jQuery 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16027746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery event when HTML5 Datalist option is clicked
提问by Rick Bross
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 "Hyman Johnson" (keyup). Another event that fires when a user starts typing the name, it pops up, the user arrows down, and hits "enter" (change).
所以我有这个 HTML5 数据列表，里面有很多选项，我有 2 个事件触发。当用户输入与填充选项的名称数组相匹配的内容时，例如“Rick Bross”或“Hyman Johnson”（keyup）。当用户开始输入名称时触发的另一个事件，它弹出，用户向下箭头，然后点击“输入”（更改）。
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="Hyman Johnson">
<option value="Rick Bross">
<option value="Rick Bross">
</datalist>
Javascript events and functions:
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);
});
采纳答案by likeitlikeit
回答by Gilles Hooghe
You can also listen to the 'select' event on the input field.
您还可以在输入字段上收听 'select' 事件。
$('#name').bind('select', function() {
// handle input value change
});
回答by Paras Kathiriya
To handle click only event here is the solution.
在这里处理仅单击事件是解决方案。
$("#book_search").bind('select', function () {
alert("changed");
});
