Как выбрать первый доступный вариант в <datalist>? - PullRequest
0 голосов
/ 05 октября 2019

Я работаю с элементом и хочу, чтобы он автоматически выбрал первый соответствующий элемент.

Моя идея состояла в том, чтобы создать пользовательское KeyboardEvent при нажатии, а затем отправить его, когда пользователь что-то печатает (сначала просто по нажатию), поэтому при каждом нажатии клавиши «стрелка вниз» будет запускаться программно.

<!DOCTYPE html>
<html>
<body>
    <form action="#">
        <input list="country" id="list">
        <datalist id="country">
            <option value="Armenia">
            <option value="Argentina">
        </datalist>
    </form>
    <script>
list.addEventListener('click', function(event){
    let key = new KeyboardEvent('keydown', {code: "ArrowDown", keyCode: 40})
    list.dispatchEvent(key)
})
    </script>
</body>
</html>

Я ожидаю, что будет выполнено фактическое действие, которое будет идентично нажатию клавиши «стрелка вниз», но это событие «пародия» ничего не делает. Если добавить addEventListener для прослушивания события keydown, оно никогда не сработает.

...