Auto Complete Example Project

I've written an ASP.Net project that shows how to configure the Auto Complete Extender(ACE), get back the text and the ID, and pull data to show in a details view. If this is your first time using the ACE, pay special attention to the web service files and the javascript in the default.aspx page.

To run this project you'll need Visual Web Developer 2008 Express, MS SQL Express 2008, and the Adventure Works demo database(AdventureWorksDB.msi).

In addition to the ACE I also used an ASP Update Panel and some basic Linq To SQL.

You can download my example project here. You'll need to set the correct connection string in the web.config file to connect to your copy of the AdventureWorks database. If you need help with connection strings, try this site.

More AutoComplete

I have been getting a lot of hits on the Google Search Appliance Auto Complete post. I thought I would add a few more notes concerning the Auto Complete control in the ajax.net toolkit. Let's say you have a long list of items in a drop down list. Wouldn't it be better to filter that list based on what the user types? Yeah, of course! That's why we have that functionality all over the web now. The only probelm is that the Auto Complete control isn't as easy to use as the other controls in the Ajax control toolkit.. For instance:

1. You have to write a web service to handle the back in call to the data source. So if all of your data is in an MS SQL database, or Access, or XML, you have to write the query for that and put it in a web service and tag it with a WebMethod attribute. Read more about web services here.
2. The webservice that the Auto Complete calls can have any name but it must have the following paramter signature: Public Function GetItemName(ByVal prefixText As String, ByVal count As Integer) As String(). The first variable must be a string and it has to be called prefixText. The second one must be called count and it has to be an Integer. Read more about the Auto Complete extender here.
3. One final thing you need to know about the Auto Complete extender is that most of the examples you'll find online show how to get back the text that the user selected, but they don't show you how to get back the ID. Let's say you have a dropdown list of car parts. There could be thousands of them. The user types in a few letters, sees the part, arrows down to it and hits enter. What you need now in order to do look ups in your related tables is the ID of that item, not the text itself. How do you get that? Inside my webMethod function I do something like this: tempResult.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(itemname), itemID))
   In this example tempResult is List( Of String). By using this CreateAutoCompleteItem function I can create an item that the Auto Complete Extender knows should be split into a text value to display and an ID value that will actually be used. Now, the return type has to be a string array, so the last line of my function is "Return tempResult.toArray()". I like working with generic lists but you could just as easliy dimension a string array with the size based on the count paramter.
4. Now, how do I get the value back from the ajax call? In the markup for the AutoComplete Extender, you need to specify a javascript function to be called after the user selects an item. Something like this: OnClientItemSelected="showItem". The showItem function will look something like this:
   function ShowItem( source, eventArgs ) {
   alert( " Key : "+ eventArgs.get_text() +" Value : "+eventArgs.get_value());
   }
   
5. What's that? You don't want the value in a javascript alert, you want to assign it to an ASP.net control, like an asp:HiddenField or something like that? Then do a getElementById('hiddencontrolID').value = eventArgs.get_value(); somewhere in your javascript function.
6. Now you are probably going to ask...what if it's in a User Control and there are lots of them on the page and I don't know what the ID is going to be for each asp:Hidden control? That's an answer for another blog post. If this one generates lots of hits I'll write it up.