Создание списка данных HTML5 видимым, когда событие фокуса срабатывает при вводе ⇐ Html

[Anonymous]

Как некоторые, возможно, уже знают, стилизация элемента select — это кошмар, который буквально невозможен без некоторых хитростей JavaScript. Новый список данных в HTML5 может служить той же цели, поскольку пользователю предоставляется список опций, а значение записывается в текстовое поле ввода.

Ограничением здесь является то, что список не появляется до тех пор, пока пользователь не начнет вводить что-то в текстовое поле, и даже тогда отображаются только возможные совпадения на основе его ввода. Я хочу, чтобы как только фокус был на поле, весь список опций становился видимым.

Итак, у меня есть этот код — просмотрите на jsbin

Код: Выделить всё

Input - Datalist




Breakfast
Brunch
Lunch
Dinner
Desserts

и я пытаюсь отобразить это с помощью этого Javascript:

Код: Выделить всё

    var catVal = document.getElementsByTagName("input")[0],
cat = document.getElementById("categories");

catVal.style.fontSize = "1.3em";

catVal.addEventListener("focus", function(event){
cat.style.display = "block";
}, false);

Будем благодарны за любую помощь.

С уважением.

Подробнее здесь: https://stackoverflow.com/questions/156 ... s-on-input