2

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

我可供选择的城市列表非常大（3K 城市），我选择使用 bootstrap-multiselect 和搜索。然而，由于选项太多，bootstrap-multiselect 相当慢。

我最大的抱怨是页面加载时间。下面是一个包含 30 个选项的演示，等它加载完毕，然后运行它，你会发现它超级快。

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

现在，下面的演示有 3K 选项，等到它加载并运行它。多选至少需要 3 秒才能采用所需的形式！

http://www.bootply.com/wK8zFCjB2D

有没有办法加快速度和/或用另一个满足我需要的组件替换引导多选？

我正在寻找可以让用户快速找到他们最喜欢的城市（例如通过文本搜索）、紧凑（可以放入表单而不是打开新窗口）并将用户限制为我拥有的 3K 选项。能够使用 js-populate 从 JSON 填充元素是一个很大的好处。

谢谢！

4

3 回答 3

3

我们遇到了完全相同的问题，但真的很想保留该组件，因为它非常方便。

我们的解决方案是在没有选项的情况下渲染组件，然后在页面渲染后使用 setTimeout 加载选项。这阻止了选项渲染阻止整个页面。

它实际上并没有更快，但对用户来说似乎更快。当您在后台渲染选项时，他们可以开始阅读页面并弄清楚发生了什么。

于 2015-11-23T21:17:15.153 回答
1

我会说该组件不适合如此庞大的选项列表，也不是最好的用户体验。你最好使用 Typeahead https://twitter.github.io/typeahead.js/examples/

于 2015-11-23T21:33:12.253 回答
0

尽管显然不是每个人都可以选择，但我们遇到了同样的事情，并选择摆脱 Bootstrap 的解决方案，转而使用React Virtualized Select。它可以精美地处理大量列表。

于 2018-12-12T00:29:39.147 回答