Bootstrap, Select2, jQuery 替换 select 框，限制结果

Question

在客户端（没有服务器端）我们有 html 文件 javascript 我们在浏览器中打开。在 HTML 文件中，我们包含 bootstrap 和 select2 个插件来创建 UI 界面，我们包含一个包含超过 10 000 行数据的文件。这是 basic.html 文件的一部分：

....
<select class="js-example" name="selectmyData[]" id="selectmyData" multiple="multiple"></select>

<script src="data/mydata.js"><script>
<script type="text/javascript">
 $(document).ready(function() {
   $(".js-example").select2({
     tags: true,
     data: mydata
   })
 });
</script>
...

这是 mydata.js 文件的一部分：

var mydata = [{id: 0, text: "aa"}, ..... ...... {id: 10000, text: "aa 10000"}];

问题: 因为变量 mydata 非常大，所以当我们 selecting 数据时，我们的响应时间很差。我们怎样才能将 Select2 插件限制为 最初 select 只有 10 行 在开始时（最初在我们加载脚本时）以及每次尝试查找一些数据时？也就是说，展示的结果一定是有限的。

没有服务器端，没有ajax，没有(my)sql服务器，没有任何其他编程语言，只有html，javascript和bootstrap5 带有 select2 插件。

Answer 1

如果问题来自 select2 生成的 select，我真的没有找到解决方案。对我来说，您可以用自动完成输入文本 w3school 替换 select2 元素（我用一些自动生成的数据对其进行了测试，准确地说是 200 000 个对象，具有与您相同的结构，而且还不错）

Answer 2

正如我从您给我们的示例中看到的那样，您希望通过键入字符来获取信息并且希望该信息在输入字段中像标签一样显示？如果我是正确的，那么你可以通过在你的 html 文件中包含“Typeahead”选项来获得这个，这是 bootstrap 插件的标准部分。

<script>
  $(document).ready(function(){
  // Defining the local dataset
  var cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini',      'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'];

  // Constructing the suggestion engine
  var cars = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: cars
  });

  // Initializing the typeahead
  $('.typeahead').typeahead({
    hint: true,
    highlight: true, /* Enable substring highlighting */
    minLength: 1 /* Specify minimum characters required for showing    suggestions */
  },
  {
    name: 'cars',
    source: cars
  });
 });
</script>

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-typeahead.php

Bootstrap, Select2, jQuery 替换 select 框，限制结果

Bootstrap, Select2, The jQuery replacement for select boxes, limit results

javascript

html

jquery-select2