Search code examples
angularjsui-selectangular-ui-select

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

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.

Solution

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