引导-多选择非常慢，有大量的选项池。

Question

在我的应用程序中，我要求客户填写一个简短的表单，其中一个字段要求他们选择3个他们最喜欢的城市(或他们访问过的城市)。

我的城市列表相当大(3K城市)，我选择了使用引导-多选择与搜索。但是，具有这么多选项的引导-多重选择是相当缓慢的。

我最大的抱怨是页面加载时间。下面是一个有30个选项的演示，等待它加载，然后运行它，您将看到它非常快。

http://www.bootply.com/07KLihND2q

现在，下面的演示有3K选项，等待加载并运行它。它将采取至少3秒的多选择，以采取所需的形式！

http://www.bootply.com/wK8zFCjB2D

是否有一种方法可以加快速度和/或用另一个将满足我需要的组件来替换bootstap-multiselect？

我正在寻找的东西，将允许用户迅速找到他们最喜欢的城市(例如，通过文本搜索)，将紧凑(可以适合于一个形式，而不是打开一个新的窗口)，并将限制用户的3K选项之一，我有。能够使用js填充从JSON填充元素是一个很大的好处。

谢谢!

Answer 1

我们遇到了完全相同的问题，但我们确实希望保留组件，因为它非常方便。

我们的解决方案是呈现没有选项的组件，然后使用setTimeout在页面呈现之后加载options 。这就阻止了呈现选项阻止了整个页面的显示。

它实际上并不是更快，但对用户来说似乎更快。当你在后台呈现选项时，他们可以开始阅读页面并找出正在发生的事情。

Answer 2

我要说的是，这个组件并不适合如此庞大的选项列表，也不是最好的UX。你最好用一些类似于https://twitter.github.io/typeahead.js/examples/的东西

Answer 3

虽然显然不是每个人都有选择，但我们遇到了同样的问题，选择了放弃Bootstrap的解决方案，转而支持反应虚拟化选择。它处理庞大的列表非常漂亮。