我目前在我的ASP.Net C# 2.0网站上有一个绑定数据的下拉列表,其中大约有400个项目。我想用类似于Google搜索中文本框的东西来替换它,您输入字母,只有以这些字母开头的条目才会弹出。
如何实现这样一个好方法?有人可以建议已经存在的控件吗?
我目前在我的ASP.Net C# 2.0网站上有一个绑定数据的下拉列表,其中大约有400个项目。我想用类似于Google搜索中文本框的东西来替换它,您输入字母,只有以这些字母开头的条目才会弹出。
如何实现这样一个好方法?有人可以建议已经存在的控件吗?
使用 HTML5(当然仅适用于小数据集)的一种方法是使用 datalist
:
<input list="users" name="users">
<datalist id="users">
<option value="Alice">
<option value="Bob">
<option value="Chuck">
<option value="Chris">
<option value="Duke">
<option value="Emily">
</datalist>
对于较大的数据集,AJAX是更好的选择。
在ASP.NET的AJAX控件工具包中,有一个AutoComplete扩展程序。您可以设置许多不同的选项来进行客户端缓存和延迟间隔。只需将其指向Web服务或页面方法,就可以开始使用了。
function AddNames(text) {
if (document.myForm.insertText.value == "") {
document.getElementById("insertText").style.border = "1px solid red";
return false;
}
else {
var option = document.createElement("OPTION");
option.text = text.value;
option.value = text.value;
document.getElementById("dropDownList").options.add(option);
document.myForm.insertText.value = "";
document.getElementById("insertText").style.border = "1px solid green";
}
}
<form name="myForm">
<table>
<tr>
<td>
<input type="text" name="insertText" id="insertText" /></td>
<td></td>
<td>
<select name="dropDown" id="dropDownList">
</select>
</td>
</tr>
<tr>
<td>
<input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td>
</tr>
</table>
</form>