Auto-Complete TextBox Using ASP.NET and AJAX

Author : Bonny M.Koodathil

Auto-Completion is a very interesting feature which was primarily made popular by Google. I have made a tutorial which explain how to implement this feature. In this article I will implement the auto-completion feature using ASP.NET 2.0 and AJAX.

Default.aspx

Follow the steps below :

1. Add a Text Box
<asp:TextBox ID="tbtest" runat="server" EnableViewState="False"></asp:TextBox>

2. Add a Div
<div id="menu_child" style="position:absolute; display:none; border: 1px solid ; background-color: white; width: 200px; height: 150px; padding: 2px; OVERFLOW: auto; " > </div>

3. Add a js include file [This will come in the next section]
<script language="javascript" type="text/javascript" src="getGoogle.js" ></script>

4. In the Page_Load add the following
tbtest.Attributes.Add("onkeyup", "if(navigator.appName=='Microsoft Internet Explorer') { return showDiv(window.event.keyCode); } else { return showDiv(event.which); } return showDiv(event.which);");
tbtest.Attributes.Add("autocomplete", "off");

Next > > getGoogle.js