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

Question

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

问题是它会在你的浏览器上打开很多选项，我一次只需要大约 10 个可见，而且它需要是一个在你开始输入时自动完成的字段

有没有办法只显示列表中 returns 的前 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 post 是 3 年前的，但它太慢了，无法使用我的选项数量。希望有人找到更好（更快）的解决方案，或者至少找到替代解决方案。

Answer 1

我在堆栈溢出中发现了另一个问题，它可以通过将控件类型从输入更改为 select 来帮助您处理您的情况：

原来你在其中一个答案中找到解决方案： 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>

Answer 2

我设法找到了 chosen 插件的解决方法。效果很好，可以在 bower 和 npm 上使用，方便访问。

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

Datalist - limit to dispay only x-amount of options

html

javascript

jquery

html-datalist