Text box with drop down suggestions - autocomplete

Question

I currently have a databound dropdown list on my ASP.Net C# 2.0 website that has around 400 items in it. I want to replace it with something similar like the textbox in google search where you enter letter and only the entries starting with those letters pop up
what is a good way of implementing it? Are there controls that already exists that anybody can suggest?

Answer 1

One way to do this using HTML5 (for small datasets of course) is 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>
For larger datasets AJAX is a better way to go.

Answer 2

Take a look at http://docs.jquery.com/Plugins/Autocomplete
Also here is a tutorial for use with ASP.Net

Answer 3

check complete.ly too
http://complete-ly.appspot.com/
it has no dependencies and weights very little.

Answer 4

If these are known enrties, you can use JQuery, and on the OnUpdate event:
if it's a long list, make Ajax Request to your webserver, retrieve the best option
if it's a short list, you can load all the options to the page, and offer the optional texts without making a server request.
Checkout the JQuery library for implementations on how to display the suggestion.

Answer 5

There's an AutoComplete extender as past of the AJAX Control Toolkit for ASP.NET. There are plenty of different options that you can set for client caching, delay interval. Just point it at a web service or page method and away you go.

Answer 6

TextBoxValueToDropDownList
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>