Javascript 选择项或键入与列表中的项匹配的输入时HTML5 datalist的jQuery事件

我有如下的数据列表-

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1"/>  
    <option value="Faizan2"/>   
</datalist>

问题是，只有当输入失去焦点时，即当我单击屏幕上的某个位置时，才会触发该事件

我也试过了

$("#name").bind('change', function () {
    console.log('changed'); 
});

但是每次我输入时都会触发回调。实际上，我需要在项目完全选中时进行AJAX调用。通过键入或从下拉列表中选择

第一种方法不利于用户透视，因为他必须进行额外的点击，而第二种方法的缺点是，对于每个字母都会触发一个事件

我想要的只是一个事件，当用户做出选择或键入完整的句子时。有没有办法做到这一点？我遗漏的任何事件，都可以解决我的问题。

在上，您可以使用

输入

事件，例如：

$（“#名称”）.on（'input'，function（）{
var val=该值；
if（$（'#allNames选项'）.filter（函数（）{
返回此.value.toUpperCase（）==val.toUpperCase（）；
})（长度）{
//发送ajax请求
警报（该值）；
}
});
您可以使用
输入
事件来实现这些功能，如下所示：


$（文档）.ready（函数（）{
$（'#name'）。在（'input'，function（）上{
var userText=$（this.val（）；
$（“#所有名称”）.find（“选项”）.each（函数（）{
if（$（this）.val（）==userText）{
警报（“在此处进行Ajax调用”）；
}
})
})
});
检查这是否适用于您：

var dataList=[];
$("#allNames").find("option").each(function(){dataList.push($(this).val())})
console.log(dataList);
$("#name").on("keyup focus blur change",function(){
    if(dataList.indexOf($(this).val())!=-1)
console.log("change");
})

我将数据列表选项推入数组，在更改事件键控、模糊或聚焦时，检查输入值是否存在于我的数据列表数组中。
简单解决方案

document.getElementById('name').addEventListener('input', function () {
   console.log('changed'); 
});

这是一种罪恶，但对我有用。（请注意，如果您正在键入“朗姆酒可乐”，它不会在“朗姆酒”选项上停止）


const opts=$（“option”）.map（函数（）{returnthis.value；}）.get（）；
$（“#喜爱的饮料”）。打开（“按键”，功能（e）{
如果（e.key）{//在鼠标事件中，e.key为“未定义”
如果（e.key==“Enter”）{//看起来用户想要确认选择
if（opts.indexOf（this.value）>=0）{
这个。blur（）；
console.log（“选中：“+this.value”）；
}
}
否则{
this.setAttribute（“data keyboardinput”，“true”）；//记住这是键盘事件
setTimeout（函数（）{//并将其保存在内存中100毫秒
此.removeAttribute（“数据键盘输入”）
}.绑定（本），100）；
}
}
});
$（“#喜爱的饮料”）。打开（“输入”，函数（）{
如果（！this.dataset.keyboardinput&&opts.indexOf（this.value）>=0）{//如果它不是按键跟随事件
console.log（“选中：“+this.value”）；
}
});

选择一种饮料：

如果从下拉列表中选择了项，则不会触发此操作list@A.Wolff似乎，
input
甚至是唯一的方法？不确定，但我猜是的，因为例如在chrome上（其他浏览器不知道），您无法将事件绑定到
datalist
元素。现在，它可能有一些肮脏的解决办法，但…这是一个有缺陷的解决办法，将导致一些输入数据集出现错误。例如，如果您有一个包含四个名称的列表，“Fred”、“Freddy”、“Fredman”，并且用户希望键入“Fredman”，那么它将在键入前四个字符后提交，因为它与“Fred”匹配。这并不意味着，但并非所有浏览器都支持HTML5数据列表。当您的选项具有类似的值时，这会导致问题（一个选项可以是另一个选项的子字符串）或数字，并且有几个选项可以匹配结果。例如，1和10作为选项将永远无法工作，因为您无法键入10。一旦输入1，则该选项将被选中。Ben和Benjamin是另一个例子。@AndrewStalker我不确定您是否在每个浏览器上都看到这种行为，但据我所知，它在chrome上的效果与预期一致。您描述的问题可能是由于
alert（）
的模态行为（safari可能会受到影响）。您能否改用console进行测试：您是否面临相同的问题？如果仍然存在，您能否告诉我如何准确复制此问题？是的，控制台输出（在Chrome上）仍然存在这种情况。使用您的JSFIDLE，我一键入1，控制台就会记录1。如果您打算键入10，现在就太迟了，因为ajax事件已经触发了1。@AndrewStalker好的，我明白您的意思。一般来说，为了处理这种行为，我们会取消ajax请求，让用户有足够的时间，如果仍然键入例如：但这似乎不是一个很好的解决方案在这里。如果
datalist
可以处理鼠标事件会更简单，但在chrome上不是这样。当我有更多的时间时，我会尝试找到更好的方法，但我真的不确定我能找到任何方法，不幸的是……啊，我明白了，这是有意义的。谢谢
document.getElementById('name').addEventListener('input', function () {
   console.log('changed'); 
});