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>

1. Does anyone know how to improve performance?

2. How to apply Minimum characters filter?

   Thanks.

Alagez

Answer 1

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">

Chalkboard

or you can use another alternative. github.com/Modulr/mdr-angular-select2 – Weiser

Answer 2

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

Pomiferous

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. – Alagez

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); } – Pomiferous

So I'd better try and find different library for selecting items out of a list? – Alagez

Depends, you could add a limit to the list Limit link. 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. – Pomiferous

I'll try to implement lazy loading on the list. Is the performance issue related to ng-repeat creating too many watchers? – Alagez

Don't know if there is a relation between the two, but there are many issues on github open about performance. Example performance issue – Pomiferous

Thank you. The example lead me to use angular-selectize instead. – Alagez

Answer 3

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.

Blairblaire