Bootstrap，Select2，jQuery替换为选择框，限制结果

Question

在客户端(没有服务器端(，我们有在浏览器中打开的带有javascript的html文件。在HTML文件中，我们包括bootstrap和select2插件来创建UI界面，我们还包括一个数据超过10000行的文件。这是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很大，所以在选择数据时，我们的响应时间很差。我们如何将Select2插件限制为在开始时(最初是在加载脚本时(以及每次尝试查找一些数据时，最初只选择10行？换句话说，展示的结果必须是有限的。

没有服务器端，没有ajax，没有(我的(sql服务器，没有任何其他编程语言，只有html、javascript和带有select2插件的引导程序5。

Answer 1

正如我从您给我们的例子中看到的那样，您想通过键入字符来获取信息，并且希望这些信息像输入字段中的标签一样显示？如果我是正确的，那么你可以通过涉及"；Typeahead"；选项，这是引导插件的标准部分。

<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

Answer 2

如果问题来自select2生成的select，我真的看不到解决方案。对我来说，你可以用一个自动完成的输入文本w3school代替select2元素(我用一些自动生成的数据测试了它，确切地说是20万个对象，结构和你一样，还不错(