I have to be honest, I was a pretty big fan of the auto complete extender in the ajaxcontroltoolkit.  But, it got me thinking, which generally results in bad things happening.  I have some searches that search multiple fields in a database, for instance, different name fields (i.e. "To" and "From").  So, with the original extender, it would be difficult to bring the results since you really only had one column.  The result would be a one column list and the user would not know what field the result is coming from.  So, I thought it would be nice to bring back a column header.  Then I figured, while I am at it, to return a string delimited by "~~" which represents table columns and have the javascript build a table for me.  So, the result is the autocomplete will show multiple columns (much like a gridview) with column header, and the user can easily see the different results that match what they are typing.

Phew, that was pretty cool.  But the width of the autocomplete div was all over the place.  So, I had to add a property so you (the developer) can resize the div width. 

 Now we are really getting somewhere.  The next step was to navigate through the table structure with both keyboard and mouse.  With the keyboard, you can use up and down to go through.  When you select the row you want and hit enter, the autocomplete will fill in with the text from whatever column matches what you are typing.  In the example, you will see text to tell you to type "223".  You will see three rows displayed.  Cursor down and hit enter.  You will see the first column text will fill in.  Instead, type in "Micha" and cursor down one row where the first name column has Michael and hit Enter.  This type Michael will automatically fill in.  Originally, my header row got in the way and the user was able to cursor down and select the header row.  Well, that is just silly, so I added another property to let the extender know if there is a header row. 

Can it get any cooler?  It turns out that yes, it can get slightly cooler.  When the list drops down, use your mouse and click any of the columns and you will see the autocomplete fill in with the value from the column you clicked.

I built the sample project quickly, I believe the solution file is actually in the customAutoCompleteExtender folder.  The second project is website which contains the default.aspx sample page and the ajaxServies.asmx/cs files needed to return results.  You can easily have the result populated from a database as I did.

customAutoCompleteExtender.zip (967.79 kb)