触发 html5 输入数据列表下拉列表显示

Trigger html5 input datalist dropdown to show up

本文关键字：列表显示 列表 数据 html5 输入 触发      更新时间：2023-09-26

在<datalist>具有预定义值的HTML5 <input>元素中，当用户输入匹配值或按向下键时，将显示下拉列表。

有没有办法触发此下拉列表显示？我可能会在 Angular 中动态更改datalist，因此希望有一种方法来触发此列表的显示。

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

是的，我们可以：

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
keyboardEvent[initMethod](
  "keyup", // event type : keydown, keyup, keypress
  true, // bubbles
  true, // cancelable
  window, // viewArg: should be window
  false, // ctrlKeyArg
  false, // altKeyArg
  false, // shiftKeyArg
  false, // metaKeyArg
  40, // keyCodeArg : unsigned long the virtual key code, else 0
  0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
document.getElementById("test").focus();
document.getElementById("test").dispatchEvent(keyboardEvent);
<input id="test" list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

使用dispatchEvent和createEvent。受IE9+，Chrome和FF支持。

相关文章：