ng-select icon indicating copy to clipboard operation
ng-select copied to clipboard

Slow performance for many items ~1000 (should have virtual scroll)

Open farin99 opened this issue 9 years ago • 7 comments

Is there a way to use "vsFor" for example, for virtual scroll so we wont have all the items in the dom?

farin99 avatar Oct 12 '16 19:10 farin99

At the moment it is not possibility to use such a solution, so this module is currently limited to only a few 100 elements. I am not sure if I will get to add such a solution soon.

It might be worth keeping an eye on the material2 select element, I guess they will come with a better scalable solution from the beginning on.

basvandenberg avatar Oct 17 '16 18:10 basvandenberg

I'm currently looking into using this component for a big list (~6400 items). I'm thinking that a new Input on the component that would limit the total number of displayed options would be a very good 'quick fix'. If the user does not find the value that it looks for then he must filter out the items using the search. Do you find this maxDisplayedOptions useful?

florinr1 avatar Mar 01 '17 15:03 florinr1

@florinr1 I had a similar use case when I needed to display a very large list of options. I ended up writing a native multi\single select component that only put the items you see in the dom. angular2-virtual-select It might fit your needs.

farin99 avatar Mar 01 '17 19:03 farin99

Isn't a classic typeahead a better option for such a use case? I think it's somewhat unreasonable to show a select box with that many items. Have a look e.g. at: https://ng-bootstrap.github.io/#/components/typeahead

JohannesRudolph avatar Mar 15 '17 15:03 JohannesRudolph

@JohannesRudolph, you are right. In most cases a simple typeahead is the best option. For UX reasons, I want to limit the number of clicks/keystrokes in the in a big form. A select like component would let the user just use the mouse.

florinr1 avatar Mar 15 '17 15:03 florinr1

The original select2 plugin ajax capability would pass what the user typed into the box as search term parameters for a remote url query for options. This was a great solution for dealing with large option lists, because the remote query could return a limit of say 30 items, and would update similar to the typeahead functionality.

Is there a way to get access to the keystrokes the user types into the box, that we can pass as a parameter to the OptionService?

ctung avatar Sep 09 '17 02:09 ctung

This can be done now with:

[virtualScroll]="true"

Sam-Davis avatar Sep 13 '21 16:09 Sam-Davis