Question

所以我有这个html datalist，它包含近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年前发现了this帖子，但是根据我的选项使用它太慢了。希望有人找到一个更好（更快）的解决方案，或者至少是一个替代解决方案。

Answer 1

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

您在其中一个答案中找到解决方案的原始文件： create dropdown list with scrollbar

Dim filename As String ="<Age xmlns=""http://newage/age/result"">15</Age>" 

 label2.Content = XMLparse("Age", filename)


Function XMLparse(ByVal strTAG As String, ByVal strXML As String) As String

    Dim xelement As XElement = XElement.Parse(strXML)
    Dim val As String     
    Dim df As XNamespace = "abc"
    val = ""
    Try
        Dim q = From el In xelement.DescendantsAndSelf(strTAG)
                Select el.Value

        For Each em In q
            val = val + "" + em.ToString() + ","
        Next em
        val = val.TrimEnd(CChar(","))
    Catch ex As Exception
        Return "Error: Can't search for tag in XML"
    End Try
    Return val
End Function

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;
}

Answer 2

我设法找到chosen插件的变通方法。效果很好，可以在凉亭和npm上使用，方便使用。

Datalist - 限制仅显示x量的选项

2 个答案: