如何通过编程方式触发datalist自动补全列表？

浏览器默认只在用户手动直接交互输入框（比如鼠标点击输入框、键盘输入）时，才会触发datalist的下拉列表展示。通过JS调用focus()只会让输入框获得焦点，但不会触发下拉行为。

这里有两种可行的解决方法：

方法1：使用原生showPicker()方法（推荐） #

这是HTMLInputElement提供的原生方法，可以直接触发输入框的下拉选择器（包括datalist），代码简洁且兼容性良好（除IE外所有现代浏览器都支持）。

修改后的代码：

const $input = document.getElementById('input');
const $button = document.getElementById('button');

$button.onclick = function() {
  $input.focus();
  // 触发datalist下拉展示
  $input.showPicker();
}

<input list="list" id="input">
<datalist id="list">
  <option>List item</option>
</datalist>
<button id="button">show list</button>

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

如果需要兼容不支持showPicker()的老浏览器，可以通过临时修改输入框的值，触发自动补全机制：

const $input = document.getElementById('input');
const $button = document.getElementById('button');

$button.onclick = function() {
  $input.focus();
  // 保存原输入值，避免覆盖用户已有输入
  const originalValue = $input.value;
  // 输入空格触发下拉，再删除空格恢复原值
  $input.value = ' ';
  $input.value = originalValue;
}

这种方式通过模拟用户输入行为，间接触发datalist的下拉展示，适合对兼容性要求极高的场景。

内容的提问来源于stack exchange，提问作者Simon Ferndriger