Autocomplete Control for ASP.NET

Why this Custom Control?

Recently in one of my project, I had to provide a interface for the user to key-in
the value, based on the value the records matching the input should be populated
below the control.

Initially, I had provided a Dropdown list, so that user can easily select the item
from the list. But, this has few disadvantages as well:

• Since the list was to huge, takes more time to bind


• Searching for an item in the list is not possible


• Selecting n^th record in the list is time consuming

To resolve these issues, I was looking for a control similar to Google's suggestion.
To achieve this I had multiple options

1. Writing my own control using ASP.NET AJAX Framework


2. Using 3rd Party controls


3. Writing my own control using ICallBackEventHandler

I prefered to go for the last option, and hence I came up with a Custom Web Control
which satisfies the requirement.

What is ICallBackEventHandler?

ICallBackEventHandler is a interface provided in .NET 2.0 Framework which
is used to indicate that a control can be the target of a callback event on the
server without doing a Page postback. Learn More

How to use this Control?

Using this control is very simple. Developers need not required to implement ICallBackEventHandler.
Just follow the steps explained below:

• Download the Control Library from the Blog


• Add the Library reference in you web applicaiton


• Add the control to your page from Design mode


• Switch to Code Behind File
  
  
  
  • Create an Delegate Instance as shown below:
    
    

    AutoCompleteTextBox.DataSourceProvider dataSourceProvider = null; protected override void OnInit(EventArgs e) { base.OnInit(e); if (dataSourceProvider == null) { dataSourceProvider = new AutoCompleteTextBox.DataSourceProvider(LoadList); txtAutoComplete.DataSource = dataSourceProvider; } }

  
  
  • In Page Load Event set the values for DataTextField and DataValueField
    
    

    if (!IsPostBack) { txtAutoComplete.DataTextField = "Name" ; txtAutoComplete.DataValueField = "CountryRegionCode"; }

  
  
  • Finally Implement Deleget Method: LoadList
    
    

    public DataTable LoadList(FilterOptions filterOptions) { DataTable resultSet = new DataTable(); SqlDataReader dataReader = null; SqlConnection sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SqlConnectionStr"].ToString()); try { string sql = @"SELECT CountryRegionCode, Name FROM Person.CountryRegion WHERE Name LIKE '" + filterOptions.FilterText + "%'"; SqlCommand sqlCommand = new SqlCommand(sql, sqlConnection); sqlCommand.CommandType = CommandType.Text; sqlConnection.Open(); dataReader = sqlCommand.ExecuteReader(); resultSet.Load(dataReader); } catch (Exception _e) { } finally { if (dataReader != null) { dataReader.Close(); dataReader = null; } if (sqlConnection.State == ConnectionState.Open) { sqlConnection.Close(); } } return resultSet; }

    
    

Properties & Methods

• Text: Gets & Sets display text


• AutoCompleteCssClass: Style sheet class for the Dropdown list


• CssClass: Style sheet class for Textbox


• DataTextField: The Text that is displayed in the list


• DataValueField: Value that is needs to be returned


• SelectedValue: Gets/Sets the selected value from the List


• DataSource: Delegate Object that should be refered on Call Back Event

Screenshots

Downloads

Control Library

Demo Application