Welcome to another AJAX tutorial, today we will be talking about the AutoComplete Extender that ships with the ASP.NET AJAX Control tool kit.

Autocomplete, great concept used by thousands of websites and social networks. We take this AJAX control for granted, you have used quite frequently actually… as a matter of fact it’s used by 500 million people daily and you used it to search for an image or a term on Google, just like you found this Tutorial.

Here is a preview of what are going to build today.

With magic like abilities , this extender knows the future, it sees it; i think it has clairvoyant powers.

Well we like our audience to think that our websites are pure magic and illusions, but in reality all that we are doing is using a simple web service to grab the information from the text input and parsing it out in our database and using the AutoComplete extender to return the results in real time to our TextBox.

So let’s begin building our Autocomplete extender.

Let’s start by adding a new WebForm to this project and name it AutoComplete.aspx.
Before you can even use the AJAX Control Toolkit, you must add a ToolScriptManager to the page. You can do this 2 ways, you can both Drag and Drop the ToolScriptManager or by type the control in source mode. Below is the markup.

Now add a textbox to your form.

Next is up is adding the AutoCompleteExtender, You can drag & drop this from the toolbox. Or click on the Tab to the right on the ASP TextBox you just added.

Now remember to set the TargetControls and name your TextBox to something you will remember for styling the Extender. As a matter of fact here is our Styles for the Extender.

So look at this, we have our extender attached to our textbox, now we have to control what is shown and how it will be shown. We will have to provide the Service Path, Give it the Target ID to control, set the minimum prefix length that it will start suggesting. You will also notice that we set an animation sequence to display and we set it to find, the AutoComplete Extender.

So now that we have our Front end built let’s create our web service method.

So let’s explain what this is really doing. So our Method GetCompletionList checks for the prefixText that we set to a minimum of two. Since we are not using a database and we are really showing you how the AutoComplete Extender works we will return a Random sequence of characters.

As you can see above, it’s a regular TextBox until you start typing in a word and it begins to find a matching statement or word.

The possibilities are endless; you can even style your list to look like Facebook or a Google Style Auto suggest.

Download Source files