html5数据集列表高度

Question

Is there any way to limit height for dataset dropdown list? When I use <input list="datalist"> and the datalist contains many elements, I'm not able to see them all. Can I limit the list size and add vertical scrolling to list all the alternatives?

I searched the web and the only answer I could find was that it's known issue without solution and to avoid it I should use jquery-ui combobox instead. I have javascript logic based on dataset so replacment with combo would require much effort.

Maybe there is some workaround to achive a limited list in html5?

Answer 1

The short answer is no, there is no easy way to achieve this without JavaScript. It is entirely up to the browser to render an input with a datalist. It will likely differ between browsers and devices as well.

If you go for JavaScript it is a lot of extra work, as you say. Do not forget about touch devices, keyboard navigation, visually impaired visitors and the tools they use when browsing, etc. Research available alternatives carefully, do not take for granted that they are are all good enough for your users. Unfortunately I do not know which ones to recommend myself.