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 plain 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.

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!

Is there a way to speed things up and/or replace the bootstap-multiselect by another ponent 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 pact (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!

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 plain 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./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./wK8zFCjB2D

Is there a way to speed things up and/or replace the bootstap-multiselect by another ponent 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 pact (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!

• javascript
• jquery
• bootstrap-multiselect
• jquery-ui-multiselect

3 Answers 3

We had exactly the same problem, but really wanted to keep the ponent as it is so convenient.

Our solution was render the ponent 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.

I'd say that ponent is not well-suited for such a large list of options nor is it the best UX. You'd be better off using something like Typeahead https://twitter.github.io/typeahead.js/examples/

Although obviously not an option for everyone, we were running into the same thing and opted to get rid of Bootstrap's solution in favor of React Virtualized Select. It handles huge lists beautifully.