如何在文本输入框按回车键时显示datalist下拉列表？

方法1：使用原生showPicker()方法 #

这是最直接的方案，现代浏览器支持HTMLInputElement.showPicker()方法，专门用来触发输入框的下拉选择器（包括datalist），刚好适配Tab切换后输入框已聚焦的场景。

修改你的JavaScript代码如下：

$('input[type=text]').keyup(function(e) {
  if (e.keyCode === 13) {
    // 调用原生方法直接显示下拉列表
    this.showPicker();
  }
});

方法2：模拟输入触发匹配（兼容旧浏览器） #

如果需要兼容不支持showPicker()的旧浏览器，可以通过短暂修改输入值触发datalist的匹配逻辑，从而唤起下拉选项：

$('input[type=text]').keyup(function(e) {
  if (e.keyCode === 13) {
    const input = this;
    // 保存当前输入值
    const originalValue = input.value;
    // 插入空格触发datalist匹配
    input.value = originalValue + ' ';
    // 立即恢复原值并触发input事件
    input.value = originalValue;
    $(input).trigger('input');
  }
});

原理是利用datalist在输入内容变化时自动显示匹配选项的特性，通过微小的内容变动触发这一原生行为。

为什么原click()方法无效？ #

浏览器原生的datalist下拉逻辑并非绑定在click事件上，而是由内部UI交互机制控制，手动触发click事件无法唤起下拉列表。

内容的提问来源于stack exchange，提问作者Disha Nandan