Question

我尝试使用数据集为5,000的select2。

交互很慢，尤其是搜索。我将需要在不久的将来处理> 500,000的数据集。

有关如何提高效率的任何建议吗？

我没有使用bootstrap typeahead的性能问题，虽然已经授权，但功能和显示元素较少。我也不知道搜索功能如何与typeahead一起使用。

这里是plunker示例，与select2的演示相同，但有5,000行数据 http://plnkr.co/edit/RyCTTloW6xp81WvoCzkf?p=preview

<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
        <small>
            email: {{person.email}}
            age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
        </small>
    </ui-select-choices>
</ui-select>

Answer 1

我遇到了同样的问题。 Ui-select的表现确实不佳。我建议使用Selectize。它的表现要好得多，但我认为500k可能太多了。角度材料虚拟列表可以作为答案。它们当时只提供少量选项，只是更新绑定。

Answer 2

5000个结果会拖慢选择速度，这是毫无疑问的。快速简便的解决方案是限制选择列表中显示结果的数量，例如：

<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search} | limitTo: ($select.search.length <= 1) ? undefined : 20">

所以关键是要添加

| limitTo: ($select.search.length <= 1) ? 50 : 20"

因此，当您打开选择时，仅显示前20个项目（没人会滚动5000个项目，它们使用我想的搜索），并且在定义搜索后，我们不再限制结果了（或者您可以限制获取甚至更好的性能）。但是，当您搜索结果时，结果的数量会减少，性能会更好。

angular select2与较大的数据集相比较慢

2 个答案: