In my application, I'm asking the customer to fill a short form, where one of the fields asks them to select 3 of their favorite cities (or cities which they've visited).
My list of cities to choose from is quite large (3K cities), and I've selected to use bootstrap-multiselect with search. However bootstrap-multiselect is fairly slow with so many options.
My biggest complain is the page load time. Below is a demo with 30 options, wait until it loads, and then run it, you'll see it's super fast.
http://www.bootply.com/07KLihND2q
Now, the demo below has 3K options, wait until it loads and run it. It'll take the multi-select at least 3 seconds to take the desired form!
http://www.bootply.com/wK8zFCjB2D
Is there a way to speed things up and/or replace the bootstap-multiselect by another component which will meet my needs?
I'm looking for something which will allow the users to quickly find their favorite cities (e.g. by text search), will be compact (can be fit into a form as opposed to opening a new window) and will restrict the user to one of the 3K options I have. Being able to populate the element from JSON using js-populate is a big bonus.
Thanks!
We had exactly the same problem, but really wanted to keep the component as it is so convenient.
Our solution was render the component with no options, then use setTimeout to load the options AFTER the page has rendered. This stopped the options rendering from holding up the whole page.
It isn't actually any faster, but to the user it seems faster. They can start reading the page and figure out what's going on while you render the options in the background.