html5 datalist wont dropdown when the sugguest list is large

问题

I use datalist to suggest a selection of data to a specific text input, but when the size of the datalist got too large( I don't know the right number yet, but quite sure when the size is larger than 40 this will happen).

I use datalist as following

<datalist id="citysuggest">
    <option value="北京">
    <option value="锦州">
    <option value="唐山">
    <option value="天津">
    <option value="清远">
    <option value="盘锦">
    <option value="成都">
</datalist>
<input type="text" list="citysuggest"  name="name1" value="" />

here shows when size not "too large", datalist can dropdown when click the down-arrow button.

but when datalist is "too large" (in this example the real number is 42), it wont dropdown a suggest list when click the down-arrow button.

For the record, this happened with Linux Chrome browser Version 39.0.2171.95

any suggestion to fix that?

回答1:

I believe this is caused by a known Cromium bug:

回答2:

Enclosed your datalist to a div and put overflow:

<div style="overflow-x: hidden; overflow: scroll; width: 100%; height:500px"> 
       <datalist id="citysuggest">
    <option value="北京">
    <option value="锦州">
    <option value="唐山">
    <option value="天津">
    <option value="清远">
    <option value="盘锦">
    <option value="成都">
</datalist>
<input type="text" list="citysuggest"  name="name1" value="" />
</div>

Hope this helps!

来源：https://stackoverflow.com/questions/27598876/html5-datalist-wont-dropdown-when-the-sugguest-list-is-large