触发html5输入datalist下拉列表以显示

Question

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

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