您可以通过编程方式显示数据列表下拉列表吗？

Question

我开始使用数据列表，它具有我需要的功能，但没有按照我想要的方式执行。具体来说，问题在于 Firefox 中，下拉菜单的激活是通过双击输入元素触发的，而不是像 Chrome 或 Edge 中那样通过单击来触发。有没有办法在 Firefox 中单击一下即可触发下拉菜单？如果没有，我可以从 NPM 或其他地方使用一些元素来进行此类自定义吗？

到目前为止，我已经检查了很多关于数据列表的帖子，但他们很少包含这个问题，当他们这样做时，解决方案并没有真正提供或者不起作用。下拉菜单是通过鼠标单击或按键触发的，因此显而易见的解决方案是触发事件。这不起作用，我能够触发该事件，但它从未触发下拉菜单。程序事件从未触发下拉菜单，而用户事件却触发了。我什至尝试存储用户事件并使用它，但这也不起作用。本质上，事件触发解决方案完全无法提供任何结果，遗憾的是我也不再拥有代码了。有什么想法吗？

<input id="test-input" list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

Answer 1

这个解决方案有效：

基本上，向输入添加一个“点击”事件监听器，当事件触发时，将

display:block

设置为数据列表元素，然后立即将

display:none

设置为数据列表元素。这样，它会显示下拉菜单，但不会将数据列表元素作为可见的 UI 元素添加到页面。

listInput.addEventListener('click', (event) => {
    dataListElement.style.display = 'block';
    dataListElement.style.display = 'none';
});

在 Firefox 124.0.2 上测试