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

Question

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

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

  <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>

Answer 1

我们可以：

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均支持。