javascript - Bootstrap-multiselect 有大量选项时速度很慢

Question

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

我可供选择的城市列表非常大(3000 个城市)，我选择使用 bootstrap-multiselect 进行搜索。然而，bootstrap-multiselect 有这么多选项时相当慢。

我最大的提示是页面加载时间。下面是一个有 30 个选项的演示，等待它加载，然后运行它，你会发现它非常快。

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

现在，下面的演示有 3K 个选项，请等待加载并运行它。多选至少需要 3 秒才能选择所需的形式!

http://www.bootply.com/wK8zFCjB2D

有没有办法加快速度和/或用另一个组件替换 bootstap-multiselect 来满足我的需要？

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

谢谢!

Answer 1

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

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

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