Angular select2 slow with a fairly large dataset

I am trying to use select2 with dataset 5000.

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

Any suggestions for effective use?

I have no performance issues with bootstrap typeahead, although it is provided, which has less functionality and display elements. I also don't know how the search function works with typeahead.

Here's a plunker example, the same as the demo for select2, but with 5000 lines 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> 
+6
source share
1 answer

I had the same problem. Ui-select has a very low performance. I suggest using Selectize. It works much better, but I think 500k might be too big. Angular Virtual Material Lists may be the answer. They only display a few parameters at a time and simply update the bindings.

+1
source

Source: https://habr.com/ru/post/976917/


All Articles