Datalist-仅显示x数量的选项

Question

所以我有一个html数据列表，它包含了几乎6000个选项，类似下面的示例。

问题是它在你的浏览器上打开了很多选项，我一次只需要10个就可以看到，而且它需要是一个在你开始打字时自动完成的字段

有没有办法只显示列表中返回的前10个选项？

for (i = 0; i < 6000; i++) { 
    $('#myList').append("<option value=Example'"+i+"'></option>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="myList">

<datalist id="myList">
</datalist>

我发现这篇文章从3年前，但它是太慢，我的选择量使用。希望有人找到更好（更快）的解决方案，或者至少是另一种解决方案。

Answer 1

我设法用所选的插件找到了解决办法。非常有效，可在bower和npm上轻松访问。

Answer 2

我发现堆栈溢出的另一个问题，可以通过将控件的类型从输入更改为选择来帮助您：

您可以在其中一个答案中找到解决方案的原始答案：使用滚动条创建下拉列表

for (i = 0; i < 6000; i++) { 
    $('#sel').append("<option value=Example'"+i+"'>Example'"+i+"'</option>");
}

document.getElementById('sel').addEventListener('click', onClickHandler);
document.getElementById('sel').addEventListener('mousedown', onMouseDownHandler);

function onMouseDownHandler(e){
	var el = e.currentTarget;
	
    if(el.hasAttribute('size') && el.getAttribute('size') == '1'){
    	e.preventDefault();    
    }
}
function onClickHandler(e) {
 	var el = e.currentTarget; 

    if (el.getAttribute('size') == '1') {
        el.className += " selectOpen";
        el.setAttribute('size', '6');
    }
    else {
        el.className = '';
        el.setAttribute('size', '1');
    }
}

select {
    position: absolute;
    z-index: 0;
    width: 200px;
}
.selectOpen {
    z-index:9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel" size = "1">
</select>