Javascript 如何检测用户何时从数据列表中选择了选项？

我希望能够检测到用户何时从链接到数据列表的

输入

元素的下拉框中选择了一个选项，以便我可以使用该操作触发另一个选项

出于某种原因，单击数据列表下拉框不会触发

单击事件。所以使用它是完全不可能的

使用
change
事件不起作用有两个原因。Chrome的
change
事件非常好，当有人选择一个选项时，它会触发，然而，在Firefox中，直到
输入失去焦点，事件才会触发。您可能认为您至少可以在Chrome上使用
change
事件，但遗憾的是，如果您键入所选内容的全文，然后单击某个选项，则不会触发更改事件，因为没有任何更改：(

最后，我们来看一个非常丑陋但似乎唯一的选项：将
input
元素的当前值与带有
input
事件的数据列表中的选项进行比较。这有很多问题

如果一个选项是另一个选项的前缀（例如
foo
，
foobar
），则此选项不起作用。如果用户在选择
foobar
之前键入
foo
，则代码将过早运行
假设您的选项都不是彼此的前缀，那么如果用户在数据列表中键入某个内容的整个文本，代码仍将运行，而不是等待他们选择它
它必须在每次运行时循环遍历数据列表中的每个选项
键入一个字符
您可以尝试使用
setTimeout
来检测某人何时停止键入来缓解这些问题，但这仍然无法实现所需的行为

我不敢相信没有一个简单的事件能解决这个问题，但我知道一定有一条路。
的确，有一条路！我们的英雄是（U+2063）。这是一个不会给字符串添加任何可见效果的字符，它只是存在。复制并粘贴此
f⁣oo
，然后检查其长度。您将看到它等于4

我们可以将此字符附加到数据列表中每个选项的末尾。然后我们可以为
input
事件设置一个侦听器，并检查
input
元素的值是否以U+2063结尾。如果以U+2063结尾，则您知道用户已选择了一个选项。然后，您应该更改
input
元素的值以摆脱EU+2063（除非选择将触发重置值的事件）

这克服了您所说的所有问题，因为用户实际上无法键入任何与数据列表中的内容匹配的内容，因此必须为任何要发生的事情选择一个选项


document.querySelector（'input'）。addEventListener（'input'，function（）{
if（this.value.slice（-1）=='\u2063'）{
this.value=this.value.slice（0，-1）；
设div=document.querySelector（'div'）；
div.textContent=`您选择：${this.value}`
toggle（'red'）；//这样即使文本不变，也可以看到何时调用它
}
})；
正文{
显示器：flex；
}
div{
左边距：1米；
}
瑞德先生{
颜色：红色；
}

foo⁣；
巴⁣；
福巴⁣；