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

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

有没有一种方法可以触发此下拉列表显示？我可能会在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支持。