有很多选项时如何防止引导选择滚动冻结

Question

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>

Answer 1

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.