是否有与选择数据列表相关的事件 <option>？

Question

我在 <input> 字段中有一个（动态）选择列表：

<input list="choices">
<datalist id="choices">
<option>one</option>
<option>two</option>
</datalist>

选择 <option> 后是否会立即触发事件？（我想 catch/use 在 Vue.js 如果这很重要）。这将是在以下场景中单击鼠标左键时的情况：

Answer 1

试试这个。它将检查该值是否存在于输入框中，并在您 select 您请求的选项时触发警报

<input list="choices" id="searchbox">
<datalist id="choices">
<option id="one">one</option>
<option>two</option>
</datalist>


$("#searchbox").bind('input', function () {
    if(checkExists( $('#searchbox').val() ) === true){
        alert('item selected')
    }
});

function checkExists(inputValue) {
    console.log(inputValue);

    var x = document.getElementById("choices");
    var i;
    var flag;
    for (i = 0; i < x.options.length; i++) {
        if(inputValue == x.options[i].value){
            flag = true;
        }
    }
    return flag;
}

Answer 2

datalist 中的选项似乎没有触发任何事件，因此您需要编写自己的解决方案。

我能够在数据列表中使用 @input 元素中的

来执行类似于触发事件的操作]

例如，在您的代码中，您可以尝试以此开头的解决方案

<input list="choices" @input="checkInput" >
<datalist id="choices">
 <option>one</option>
 <option>two</option>
</datalist>

在使用@input的方法中可以查看输入值的变化

  checkInput(e){
    var inputValue = e.target.value;
    //Your code
  },

例如，您可以在点击数据分析师的一个选项后检查输入值是否为有效选项，在满足条件后您可以启动另一种方法或任何您想要的方法。

是否有与选择数据列表相关的事件 <option>？

Is there an event connected to the choice of a datalist <option>?

html

javascript

html-input

dom-events

html-datalist