Select tag with 1000 options - performance hit

问题

I am using a plugin called Chosen which basically adds searching to a select html object. I load the results from an ajax page. However I have a lot of options appended to the select tag - around a thousand. Maybe it is the chosen plugin, but having a 1000 options does seem a bit laggy.

How is this gonna affect performance and what are the workarounds?

回答1:

Instead of <select> you could use <input> + <datalist>, that handles 1000+ options pretty well.

jsfiddle

<input type="text" list="your-data-list"/>
<datalist id="your-data-list">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    ...
    <option value="9999">Option 9999</option>
</datalist>

来源：https://stackoverflow.com/questions/11561200/select-tag-with-1000-options-performance-hit