angular select2 slow with largish data set

Question

I'm trying to use select2 with a dataset of 5,000.

The interaction is slow, especially the search. I will need to handle datasets of >500,000 sometime in the near future.

Any suggestions on how to make this efficient?

I have no performance issues with bootstrap typeahead, though granted, that has less functionality and display elements. I also don't know how the search functionality works with typeahead.

Here's the plunker example, same as the demo for select2, but with 5,000 rows of data 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>

Saline

In my opinion with large data set it does not make sense to give a dropdown functionality you should just use typeahead, with large data i dont think there is any value in giving user the dropdown with values which he is always going to use search to select an item. – Coppins

Answer 1

I had the same problem. Ui-select has really poor performance. I suggest using Selectize. It behaves much better but I think 500k may be too much. Angular Material Virtual Lists can be the answer. They render only few options at the time and just updates bindings.

Peasecod

Answer 2

5000 results slow the select down, there's no doubt about it. The quick and easy solution would be to limit the amount of displayed results in the select list, like this:

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

So the key is to add

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

So when you open the select only first 20 items are shown (nobody will scroll 5000 items, they use the search I suppose) and when the search is defined, we do not limit the results anymore (or you can limit to get even better performance). But when you search the amount of results is lower and the performance is better.

Agency