Как полностью отобразить строки в HTML5 списка данных?
Очень часто, возникает потребность отобразить в выпадающем списке, достаточно большие строки, но они показываются не до конца.
Пример здесь:
http://jsfiddle.net/kb1yew02/
Можно ли как то, увеличить длину отображаемых строк выпадающего списка, или хотя бы сделать перенос на новую строку?
Есть ли какое-то решение?
option бывает только однострочным. Можно сделать свой, на обычных div... там больше заморочек с версткой, чем со скриптом)
https://stackoverflow.com/questions/28562621/html-select-option-multiline-value - там предлагают плагин на jQuery...
jQuery Selectric не подходит для моей задачи, т. к. он стилизует, что select, что datalist под выпадающий список выбора.
Но по чистой случайности, я наткнулся на jQuery flexdatalist:
http://projects.sergiodinislopes.pt/flexdatalist/
Вот чего мне удалось добиться, чтобы приблизиться к тому поведению, который был в моём вопросе:
http://jsfiddle.net/9zb4pqf1/
Его проблема заключается в том, что событие onchange начинает работать как oninput. Это не позволяет мне получить значение из data-* атрибута, от чего я не могу получить последнее значение в событии onblur.
Так же я заметил, что плагин кажется запоминает последнее значение находящееся в поле выбора, поэтому если даже я очищаю поле в фокусе, подсказка не всплывает. Плагин думает, что поле что-то есть.