Ajax Auto Complete Textbox

November 2, 2009
Filed under: Featured, JavaScript 

Ajax Auto Complete Textbox using ASP.Net AjaxControlToolKit

To improve the user experience a lot of Ajax enabled functionlities are there, but AutoComplete dropdown for the textbox in the ASP.net is the best amont them. However if the Auto Complete is not responsive, the users will feel that it is troublesome rather than the useful. We planned for light weight solution. Ended up with this WebService based approach than a Webpage to fetch the data along with heavy Heavy HTTP response.

WebService And Auto Complete
Data is transferred from application server to JavaScript using a WebService. Hence the data transfer between server and client is very minimal. Add some animations to improve usablity and it is very easy with AutoCompleteExtender.

Once downloaded, create a new website and select the Default.Aspx and then switch to design mode in the Web Form for designing the page.

1)Add a web service named AutoComplete.asmx




2)Import AjaxControlToolkit

3)Add a new function named as GetProducts with the required parameters(prefixText,count)

4)now get a datareader to fill up the Array list.

5)Fill up the AutoCompleteExtender with the web service and web method we created just now.

For Complete working source code with step by step procedure please refer here (Ajax AutoComplete Textbox with Database).

Note:This article needs Ajax Control kit. It needs to be downloaded separately.

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image