使用大量值填充<select> </select>

时间:2016-07-07 23:32:39

标签: javascript html angularjs

我有一个网页表单,用户输入了某些特征的值,但是某些特征最多有45000个值。

选择工作较早,虽然在填充下拉列表并尝试快速滚动时略有滞后,但现在它根本没有填充并且Web表单挂起。

有没有办法有效地将这么多值包含在下拉列表中?哪个是可搜索组合框的最佳库?

我查看了这个实现,因为它有一个“开启加载”功能,我认为这可能是有益的,但它似乎不起作用,不再积极开发。 http://john-oc.github.io/

由于

4 个答案:

答案 0 :(得分:5)

在这种情况下,最好使用自动完成功能而不是选择菜单。用户可以键入前几个字符,从而导致请求根据其输入开始过滤结果。

以下是一些非常好的自动完成插件:

https://github.com/devbridge/jQuery-Autocomplete

滚动你自己:

http://www.webreference.com/programming/javascript/rg16/index.html

答案 1 :(得分:0)

我同意Todd的观点,我认为您可能需要一些具有自动完成功能的解决方案来隐藏太多结果。我甚至更进一步建议bootstrap DataTables:https://datatables.net/manual/styling/bootstrap

您可以使用此方法制作可搜索的表格,其主要优点是可以对结果进行分页,因此您不会立即看到所有内容。

答案 2 :(得分:0)

我是https://github.com/angular-ui/ui-select的粉丝。您可以根据当前文本输入发出请求,然后填充下拉列表。

答案 3 :(得分:0)

由于问题已经回答,请让我在这里做出贡献。

您可以使用typeaheads中的angularStrap来实现此目的。除了轻松操作数据之外,您甚至可以使用数据提供程序进行异步调用。