AJAX Autocomplete Web User Control for ASP.NET 2.0

Thank you for downloading this web control and thank you again for at least skimming the ReadMe file. Most of the answers you are looking for are located in this document. If not, post a comment at this blog entry and I will do what I can to help you out.

What Does It Do?

This web user control makes it easy to add an autcomplete box to an existing ASP.NET website. An autocomplete box is a familiar user interface control to many users. It provides a text box that offers a drop down of options that are filtered based on the text entered. This not only reduces the time it takes to find the option the user is looking for, but it helps ensure that the data entered is more accurate by providing suggestions.

How Do I Use it?

To use this control, copy all files into your project. Create a new web form and add the user control to it, specify a DataSource and other config options and you should be on your way. A sample page, Abbreviations.aspx is included showing exactly how the control can be used. It loads an XML file into a DataSet and uses that as the DataSource for the control. In your application, you will need to pull your options from your own data store, whether from XML, a database or another source.

What are the Configuration Options?

Data Configuration

DataSource (DataTable) - DataTable containing the options to populate
DataTextColumn (string) - Column name of the Text of the option (also the value as of right now)
DisableCache (boolean) - True to disable caching of DataSource, false to enable caching; Default: false
CacheMinutes (integer) - If Caching is enabled, specfies in minutes how long to cache the DataSource
SelectedValue (string) - This is the value that was picked from the list
==UNUSED== DataValueColumn (string) - Column name of the Value of the option

Search Configuration

MatchKeyCount (integer) - Specify the number of characters that must be entered before AutoComplete begins; Default: 0 (AutoComplete starts after the first character is entered)
SearchStyle (enum) - "StartsWith" searches for options beginning with search text, "Contains" searches for options containing search text, and "EndsWith" searches for options ending with the search text. Default: StartsWith
IsCaseSensitive (boolean) - True if search is case sensitive, false if not. Default: false
AutoPostBack (boolean) - True to have a selection also post the form back, false to only populate the text box; Default: false

Event Configuration

OnResultSelected (string) - Name of function to call when option is submitted

Display Configuration

ListCount (integer) - Specifies maximum number of options to show in option list; Default: 10
AutoCompleteWrapperCssClass (string) - CSS Class for entire control container
ListCSSClass (string) - CSS Class for option list container
ListOptionCSSClass (string) - CSS Class for individual option
ListOptionHighlightedCSSClass (string) - CSS Class for individual option as it is hovered over
QueryBoxCSSClass (string) - CSS Class for text box
ButtonCSSClass (string) - Css Class for submit button
ButtonText (string) - Text to be displayed on submit button; Default: Search

How do I change the location of the supporting files to match my site structure?

AutoCompleteSearch.css - AutoCompleteSearch.aspx, line 2

AjAXAutoCompleteUtilities.js - AutoCompleteSearch.aspx, line 3