javascript - Datalist - 限制只显示 x 数量的选项

Question

所以我有这个包含近 6000 个选项的 html 数据列表，类似于下面的示例。

问题是它会在你的浏览器上打开很多选项，我一次只需要大约 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>

我找到了 this 3 年前的帖子，但在我的选项数量上使用它太慢了。希望有人能找到更好(更快)的解决方案，或者至少找到替代解决方案。

Answer 1

我在堆栈溢出中发现了另一个问题，它可以通过将控件类型从输入更改为选择来为您提供帮助:

原来你在其中一个答案中找到解决方案: create dropdown list with scrollbar

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>