Large selects loading very slow

[Godrules500]

I am using Bootstrap select version 1.6.3. I have a select box that is loading 1000 results, and it is very slow upon initializing. However, when I load it without using bootstrap, it loads in no time. Is there a way to, or any chance in the future, of speeding this up significantly?

If not, is there a way to use the bootstrap select css with a regular select box? That way I can keep the look consistent across the site?

[truckingsim]

The reason bootstrap-select is so slow (and this will go for any of the select box stylers like select2, chosen, etc...) is that they replicate a select box. It is not possible to make a select box look like bootstrap-select does while just styling the original select. So, instead we fake it.

To fake it though, every <option> tag is made using 6 html tags. So 1,000 options becomes 6,000 elements. 6,000 elements to show and hide (when opening the select picker), and searching (assuming you have that on since you have so may elements). There is no way to realistically speed this up, to be able to style the dropdown you will always need more than 1 element. There is also no way to style the original select picker to look like your other bootstrap-select dropdowns.

Now saying all that, I ran into this problem as well and wrote a plugin called Ajax-Bootstrap-Select that goes on top of bootstrap-select which adds ajax support to the search box. You can still use all the options of bootstrap-select (like for labels, and custom html, etc...) and you can send as many elements as want since it through ajax (for instance if someone searches for A, only send the first 25 elements if that's what makes you happy). This makes the page load quicker and the interaction as well since you don't load the 1,000 elements on the page.

Obviously if you use that plugin, you'll need to implements a searchable API on the server for the dropdown, but if you are generating 1k elements I imagine you have a list you can search through fairly easily and return the filtered results.

Let me know if I can be of anymore help!

[Godrules500]

That's pretty cool. Do you happen to have a jsFiddle or a way to see it to see if it before I program it? Does it have the ability to, let's say, load 100 results, and as they scroll past that, it loads the next 100 results?

Also, I just implemented the select2 and it loads instantly without any problem. I just like the look and feel of bootstrap-select much more than the rest.

[truckingsim]

Yeah here's an implementation that hits a static json file on the gh pages and does the filtering client side through the pre-process function. You could to if you wanted.

As for the infinite scrolling its something I want to implement but haven't yet, we also don't have any grouping mechanism built in. But its all stuff we want to add.

[t0xicCode]

As @truckingsim mentionned, we'll always be slower than a vanilla select. However, we like to improve our performance as we go along.

I'll close this issue for now, but if you find some specific performance improvements, please open new issues.