8

我正在尝试将 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>
4

2 回答 2

1

我有同样的问题。ui-select 的性能真的很差。我建议使用选择。它的表现要好得多，但我认为 500k 可能太多了。角度材料虚拟列表可以是答案。他们当时只呈现很少的选项，只是更新绑定。

于 2017-04-12T15:00:00.673 回答
0

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

于 2019-08-29T14:49:30.093 回答