Javascript 如何获取数据列表的更改事件？

我使用的是数据列表，需要检测用户何时从下拉列表中选择某个内容。但是我需要它，这样只有当用户从数据列表中选择某个内容时，事件才会触发。如果他们在输入中键入了什么，那么我不希望触发事件。（请注意，在我链接的问题的公认答案中，它们绑定了输入，这不是我想要的）。我试过（没有成功）：

这里是选项1
这里是选项2
$（文档）.on（'change'，'datalist'，function（）{
警报（“hi”）；
});

编辑：

---

此问题与建议的问题不同，因为它是一个完全不同的问题。

您可以在更改时手动检查它。但是您需要检查datalist输入的更改

$(document).on('change', 'input', function(){
    var options = $('datalist')[0].options;
    var val = $(this).val();
    for (var i=0;i<options.length;i++){
       if (options[i].value === val) {
          alert(val);
          break;
       }
    }
});

$（文档）.on（'change'，'input'，function（））{
var options=$（'datalist'）[0]。选项；
var val=$（this.val（）；
对于（var i=0；i优化解决方案

$("input").on('input', function () {
    var inputValue = this.value;
    if($('datalist').find('option').filter(function(){
        return this.value == inputValue;        
    }).length) {
        //your code as per need
        alert(this.value);
    }
});

请寻找你的解决方案，很好。
寻找演示


$（文档）.on（'change'，'input'，function（））{
var optionslist=$（'datalist'）[0]。选项；
var值=$（this.val（）；
对于（var x=0；x更优化

$("input").on('input', function () {
  if($('datalist').find('option[value="'+this.value+'"]')){
    //your code as per need
    alert(this.value);
  }
});

这可能只是Chrome，未在其他任何地方测试过！，但我看到一个
更改
事件在选择一个选项时被触发。通常
更改
只在文本字段失去焦点时发生。如果是正常的非数据列表更改，
更改
事件在
模糊
事件之前触发，因此我们必须检查两者：我们正在寻找一个
更改
，它不是立即，，然后是
模糊
：

var timer;
el.addEventListener('change', function(e) {
    timer = setTimeout(function() {
        el.dispatchEvent(new CustomEvent('datalistchange'));
    }, 1);
});
el.addEventListener('blur', function(e) {
    clearTimeout(timer);
});

然后，您可以像正常情况一样侦听自定义的
datalistchange
事件。或者您可以只放置特定的逻辑，而不是
dispatchEvent

在具有InputEvent属性的浏览器中，您可以使用该属性过滤掉任何不需要的onInput事件。这是Firefox 81上的“insertReplacementText”，Chrome/Edge 86为空。如果您需要支持IE11，则需要验证该值是否有效


document.getElementById（“浏览器”）
.addEventListener（“输入”，函数（事件）{
if（event.inputType==“insertReplacementText”| | event.inputType==null）{
document.getElementById（“输出”）.textContent=event.target.value；
event.target.value=“”；
}
})
从列表中选择您的浏览器：
我搜索了很多，似乎没有任何正常的方法可以做到这一点。你可以使用
jQuery UI
的
Autocomplete
小部件：你可以使用这个小脚本：。虽然它是为自动建议创建动态数据列表而编写的，但它也可以处理静态数据列表。这里有一个小提琴：。（文档：和演示：）@StephanMuller可能重复这是一个不同的问题。应该有更好的方法来处理这个问题。数据列表可能包含实体。如果我输入了现有实体的相同名称，这并不意味着我键入的名称与数据列表中的名称相同。可能有其他字段将一个实体与另一个实体区分开来，而不是na我。因此，从数据列表中选择一个项目与在其中一个列表中键入相同的文本不同。这听起来可能像是一个6年前的问题的边缘案例，但这正是我现在要处理的：）
var timer;
el.addEventListener('change', function(e) {
    timer = setTimeout(function() {
        el.dispatchEvent(new CustomEvent('datalistchange'));
    }, 1);
});
el.addEventListener('blur', function(e) {
    clearTimeout(timer);
});