Append up to 20k tags freezes the browser

Hello all, we have a select tag that has over 20k option tag, and it’s rendered server side, and obviously it takes a lot of time, so I need to change it to be repeated client side from a JSON except that when I append the new bulk of tags the browser freezes and start to perform poorly.
Do anyone has an idea about the reason or a solution?
Thank you all.

Use a search field in which the user can type part of the option, have that query the server for matching options, then populate the select with only those matching options. You could invent this yourself, but there are already implementations out there that can do this. I believe EasyUI is one of them (link is to the jQuery version, but they have Angular, Vue, and React versions too).

1 Like

A select element with 20k options doesn’t sound very usable to me. I would also assume it is not just populating the select that is causing issues but when selecting an option as well. As already said, I think it is time to rethink that approach.

Here is another lib, never used it.
https://select2.org

Its not particularly surprising, you’re trying to add 20k tags using JS. Why have you got 20k options? Country selectors are the most common select elements encountered in the wild that have large set of options. They normally have ~250 entries and they’re normally difficult/borderline impossible to use. 20k will not be possible to use at all. This isn’t a use case for a select field, I assume it should be an autocompleting field like @chuckadams suggests, but it should be text (so you only ever render one value, or maybe a comma-seperated list). Not select.