Limit the number of displaying options?

How Do I...
#1

Do smth like ‘display first 10’

#2

Could you give a little more context for what you are trying to achieve? Is this with remotely-sourced data, or local data?

#3

This is a usual static select, for example, with 30 options, and I want to limit them, don’t show more then 10 at the select’s opening

#4

How about a custom matcher with a counter?

#5

This thread seems dead, but in case anyone else has the same issue, I’m going to comment anyway.

I’m not sure a custom matcher would do what the original poster wants… It certainly could limit the display to the first n options, but it would actually hide all the other options after the _n_th one. I imagine that the OP actually wants to physically control how many options are displayed in one “screenful”—i.e., show 10 options, but be able to scroll the rest of them into view. (I’m assuming the OP is using it like a typical drop-down select. If, on the other hand, they wanted to use it with the search box, then a custom matcher would be a good way to limit the maximum number of displayed matches to the user’s query term.)

If the OP can control the size (height) of the individual options (e.g., ensure they don’t wrap and only take up one line each), then they could theoretically calculate the height of an individual option and use CSS to limit the height of the Select2 display DIV to something like 10x the height of an individual option. A custom renderTemplate could help with controlling the height of each option. But in the general case where the height of each option is essentially unknown, there’s probably no reliable way to do what the OP wants.

#6

Also, fairly sure this thread is dead - another 5 years later… lol.

I came here because I thought the number of results showing was controlling the height of the selection box. Well, it isn’t. So if the OP or anyone else wants to control the height of the box that appears when you click on the select, then please consider adding the following css during initialisation. Feel free to change the height, but this limits the options shown to about 7 (including a blank entry).

.select2-results__options {height: 150px;}

TTFN!