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.

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

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