选定项目或键入的输入与列表中的项目匹配时，HTML5 datalist的jQuery事件
选定项目或键入的输入与列表中的项目匹配时，HTML5 datalist的jQuery事件
提问于 2015-05-10 20:50:45
我有如下的数据列表-
<input id="name" list="allNames" />
<datalist id="allNames">
<option value="Adnan1"/>
<option value="Faizan2"/>
</datalist>我想要的是，当一个项目被完整地键入(例如，当用户完整地键入“Adnan1”时在输入框中)或从列表中选择时，那么我想要一个事件。我尝试了几种方法，但到目前为止，这两种方法都没有帮助。方法是-
$("#name").change(function(){
console.log("change");
}这样做的问题是，只有当输入失去焦点时，即当我单击屏幕上的某个地方时，事件才会被触发。
我也试过了
$("#name").bind('change', function () {
console.log('changed');
});但是每次我输入的时候都会触发回调。当项目被完全选中时，我实际上需要进行AJAX调用。通过键入或从下拉菜单中选择。
第一种方法对用户的观点不好，因为他必须进行额外的点击，第二种方法的缺点是每个字母都会触发一个事件。
所有我想要的是一个事件，当用户作出选择或键入完整的句子。有没有办法做到这一点？我错过的任何事件都可以解决我的问题。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-05-10 21:14:47
在modern browsers上，您可以使用input事件，例如：
$("#name").on('input', function () {
var val = this.value;
if($('#allNames option').filter(function(){
return this.value.toUpperCase() === val.toUpperCase();
}).length) {
//send ajax request
alert(this.value);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="name" list="allNames" />
<datalist id="allNames">
<option value="Adnan1" />
<option value="Faizan2" />
</datalist>
PS:由于input事件比datalist元素具有更好的支持，如果您已经在使用datalist元素，那么确实没有理由不使用它。
Stack Overflow用户
发布于 2015-05-10 21:15:26
您可以使用input event来实现这些功能，如下所示：
$(document).ready(function() {
$('#name').on('input', function() {
var userText = $(this).val();
$("#allNames").find("option").each(function() {
if ($(this).val() == userText) {
alert("Make Ajax call here.");
}
})
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" list="allNames" />
<datalist id="allNames">
<option value="Adnan1" />
<option value="Faizan2" />
</datalist>
Stack Overflow用户
发布于 2015-10-09 18:15:08
简单解决方案
document.getElementById('name').addEventListener('input', function () {
console.log('changed');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30151633
复制相关文章
相似问题