spent some time playing around with the AutoComplete control to seeif we could use it to provide smarter filtering capabilities for ourdata tables. The general idea was that I would allow the user toselect a filter column from a drop down list. Then as they key incharacters into the adjacent textbox I would use the
AjaxControlToolkit's AutoCompleteextender to suggest some values to filter by. You can see this in thescreen shot below. I selected 'City' in the drop down and then typed'be' into the textbox and like magic the 3 cities in my data set thathave start with 'be' appear.
Live Demo (IE6, IE7 and FF) |
Download (.Net 3.5 and Toolkit 3.5.11119.0)
If you are interested in how I created this sample, the details are below.
The AjaxControlToolkit's AutoCompleteExtender If are familiar with
Google Suggest,the concept behind the AutoComplete control is the same. As you typeinto a textbox, a drop down list appears that provides suggestions forwhat it is that you are trying to type.
Here is the description provided by the toolkit's documentation.
To add AutoComplete functionality to your page, you have to work your way through three tasks:
- Wiring the AutoComplete extender to the TextBox
- Implementing the ServiceMethod that returns the list of suggestions
- Define the style rules for the AutoComplete's flyout
Wiring the AutoComplete Extender to a TextBox Westart by adding a regular TextBox to your page. The auto completefeatures are applied by adding the AutoComplete control to the page andpointing it (setting the TargetControlID) to that of the TextBox. Nothing special here, this is pretty much the same as all of the otherextender controls.
Implementing the ServiceMethod Next,we need to implement a bit of logic on the server that returns oursuggestions based on the characters the user has typed into theTextBox. We can place this logic within a PageMethod or a WebMethod. However, for the AutoComplete control to function properly the methodmust take on one of the following signatures (you can change themethod's name, but the parameter name and type and the return type mustmatch exactly).
The
prefixText parameter is the text the user has entered so far.
count is the maximum number of suggestions to return. The final parameter
contextKey allows you to provide any extra user or page specific context yourServiceMethod might need. The return type is a string array thatcontains the suggestions. Below is the ServiceMethod I haveimplemented for this sample.
Iwanted my routine to provide suggestions only for the column the userhas selected in the drop down list. I am using the contextKeyparameter to send this additional bit of context information back to myServiceMethod. So if you look at the screen shot below, I typed 'be'into the textbox and the AutoComplete control rendered a drop down withthe following three value: Berlin, Beaverton and Beverly Hills. Beforethe drop down was rendered the following sequence of operationsoccurred
- The AutoComplete control invoked myGetCompletionList ServiceMethod, passing the following values:prefixText: 'be', count: 5, contextKey:'City'
- MyServiceMethod processed the request and selected the top 5 distinctCities in my data set that start with the prefix 'be' (it turned outhere were only 3).
- These 3 cities {'Berlin', 'Beaverton', 'Beverly Hills'} are returned to the AutoComplete control back on the client
- After receiving the list of suggestions, the control renders the flyout, providing the user with the suggestions
Styling the AutoComplete Flyout Nowthat the controls are wired and our ServiceMethod is implemented, wecan focus on the styling of our suggestion flyout. The AutoCompletecontrol injects a UL/LI structure into the page for the suggestionitems and provides you with 3 CSS classes that you can use to style thecontrol to you liking.
Iwanted my flyout to look as close as I could to a standard drop downlist, so I used the following style rules. This is pretty close towhat the AutoComplete's demo site uses, except I use the Highlight andHighlightText colors for the highlighted classes.
A Few More Details AsI was creating this sample, I stumbled into a few issues that I had toresolve. The first was that I needed a way to dynamically determinewhat contextKey value to send with the call to my ServiceMethod. So toaccomplish this, I attached a JavaScript event handler to theAutoComplete's populating event. This event fires right before the theAutoComplete invokes my ServiceMethod. I use this event to register abit of code that updates the contextKey value to the value of dropdown's currently selected item. Secondly, after the user selects oneof the suggestions, I want to force a postback so the filter can beapplied to the data. I resolved both of these issues by using thefollowing piece of JavaScript that runs on pageLoad ...
Other Items I Would Like To Get To There were a few items that I didn't quite get to ...
- Improve the Styling of the Flyout
If you search on ajaxrainfor autocomplete, you will find a ton of cool AutoComplete flyout'sthat include some pretty nice styles. I would like to see if thetoolkit's AutoComplete control would support creating flyout's likethis.
- What about when there are no suggestions?
I would like to let the user know that no suggestions were found. I need to look into how to do this.
That's it. Enjoy!