Триггера вход html5 DataList выпадающие, чтобы показать

Question

В качестве <input> элемента HTML5 с заранее определенными значениями в <datalist>, когда пользователь либо вводит соответствующее значение или нажимает клавишу вниз, выпадающий список показывает вверх.

Есть ли способ вызвать этот раскрывающийся список для отображения? Я мог бы динамически изменять 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

Да, мы можем:

\t var keyboardEvent = document.createEvent("KeyboardEvent"); 
 
\t var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent"; 
 

 

 
\t keyboardEvent[initMethod](
 
\t \t \t \t \t "keyup", // event type : keydown, keyup, keypress 
 
\t \t \t \t \t \t true, // bubbles 
 
\t \t \t \t \t \t true, // cancelable 
 
\t \t \t \t \t \t window, // viewArg: should be window 
 
\t \t \t \t \t \t false, // ctrlKeyArg 
 
\t \t \t \t \t \t false, // altKeyArg 
 
\t \t \t \t \t \t false, // shiftKeyArg 
 
\t \t \t \t \t \t false, // metaKeyArg 
 
\t \t \t \t \t \t 40, // keyCodeArg : unsigned long the virtual key code, else 0 
 
\t \t \t \t \t \t 0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0 
 
\t); 
 
\t document.getElementById("test").focus(); 
 
\t 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.