Slow behaviour of angular-ui-select's drop down list when big list of items in Modal

Question

I use angular-ui-select with a list of ~1500 items in bootstrap modal window.

There is a delay of 2 seconds for every action the user does. I tried to improve performance by by using 'minimum-input-length', but the filter does not work.

Plunkr example: https://plnkr.co/edit/H0kbeR4kHfZFjsBnpjBC?p=preview

MY Html:

<ui-select multiple sortable="true" ng-model="vm.selected" theme="select2" style="width: 100%;">
              <ui-select-match placeholder="Select...">{{ $item.name }}</ui-select-match>
              <ui-select-choices repeat="item in vm.items | filter: $select.search" minimum-input-length="2">
                <div ng-bind-html="item.name | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>

Does anyone know how to improve performance?
How to apply Minimum characters filter?

Thanks.

score 12 · Accepted Answer · answered Jul 12 '16 at 14:06

12

I solved that using a LimitTo, checking the search length:

limitTo: ($select.search.length <= 2) ? 0 : undefined"

the complete code:

<ui-select-choices 
  repeat="item in ctrl.items | filter: $select.search | limitTo: ($select.search.length <= 2) ? 0 : undefined">

answered Jul 12 '16 at 14:06

Rafael Zeffa

2,334
22
20

or you can use another alternative. https://github.com/Modulr/mdr-angular-select2 – Gery Feb 18 '17 at 08:10

score 1 · Answer 2 · answered Jun 28 '16 at 15:38

1

As i believe the minimum length will only work with use of the refresh function. The performance is still a issue as there are many issue.

Documentation of uiselect

Minimum characters required before refresh function is triggered

answered Jun 28 '16 at 15:38

Jefiozie

133
9

As I understand, 'refresh' function is only for defining the source of data as an $http request. In my example, I already have all the data stored in local variable. – badigard Jun 29 '16 at 09:12
That is correct but the "minimum-input-length" works only with the refresh functionality. (as far as I know). Some code of the ui-select below where you can see that the minimum input length will fire the refresh function. if (!attrs.minimumInputLength || $select.search.length >= attrs.minimumInputLength) { $select.refresh(attrs.refresh); } – Jefiozie Jun 29 '16 at 09:39
So I'd better try and find different library for selecting items out of a list? – badigard Jun 29 '16 at 11:35
Depends, you could add a limit to the list [Limit link](https://github.com/angular-ui/ui-select/wiki/ui-select). Say that you initially load 10/20 items. If the user then search to a specific value you can use the refresh function as described on the wiki. Second you can maybe load the list and only append the values the user is searching. – Jefiozie Jun 29 '16 at 11:50
I'll try to implement lazy loading on the list. Is the performance issue related to ng-repeat creating too many watchers? – badigard Jun 29 '16 at 12:12
Don't know if there is a relation between the two, but there are many issues on github open about performance. [Example performance issue](https://github.com/angular-ui/ui-select/issues/88) – Jefiozie Jun 29 '16 at 12:54
Thank you. The example lead me to use angular-selectize instead. – badigard Jun 29 '16 at 14:34

score 0 · Answer 3 · answered Nov 27 '18 at 20:12

If you are also ordering the list with orderBy (which will slow it down even more), make sure you have it last in the filter chain:

repeat="item in list | propsFilter: {name:$select.search} | limitTo:100 | orderBy:'name'">

Now it will order only the filtered values, not the whole list. This increases performance somewhat, but does not resolve the underlying problems.

Slow behaviour of angular-ui-select's drop down list when big list of items in Modal

3 Answers3