I'm using a bootstrap-select with 1000 options.
When I try to scroll down options, scroll goes down about 60 options and them it freezes in that place.
How can I fix it?
My code:
<select class="selectpicker" data-live-search="true">
`<option> 0</option>
<option> 1</option>
<option> 2</option>
<option>1000 more down</option>
</select>
I am not quite sure, but for me a selectpicker with 1000 elements is very bad because it is very difficult to find and select a certain option (bad UX). In my own understanding, select-options should be limited to about ten or so, depending on the use-case of course. I don't know the bootstrap-select library very well, however I would guess that the library as well as the select-tag are simply not designed to load so many options and generally need more memory to load so many.
If you want to get a number as an input, I would highly recommend you to use an input of the type number instead.
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Input -->
<input type="number" class="form-control" min="0" max="1000" step="1" value="0">If you don't only store numbers in your input, another possibility could be to create a sort of live-search where the user enters a text and only the items that match the most are displayed in a dropdown.