Angular Select2 在大型数据集下运行缓慢

Question

我正在尝试使用select2处理一组包含5,000个数据集的内容。交互速度缓慢，特别是搜索时更为明显。将来，我需要处理超过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>

- Jason

---

在我看来，对于大数据集，使用下拉功能并没有意义，你应该使用自动补全功能。在大数据情况下，我认为给用户提供下拉菜单并不会有任何价值，因为用户总是会使用搜索来选择一个项目。 - PSL

Answer 1

我遇到了同样的问题。Ui-select表现非常差。我建议使用Selectize。它的表现要好得多，但我认为500k可能太大了。 Angular Material虚拟列表可能是答案。它们一次只呈现少量选项，并仅更新绑定。

- Maciej Szpyra

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个项目，我想他们使用搜索）。当定义搜索时，我们不再限制结果（或者您可以限制以获得更好的性能）。但是，当您搜索结果数量较少且性能更好。

- michal.jakubeczy