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

Uisng Google Bookmark in Chrome

Now, the world know that Google has come up with it's own Web Browser; Google Chrome, built on open source Chromium project. Google Chrome is simple, fast and easy to use web browser.

To know more about Google Chrome and it's features, Click here

Ok, comming back to Google Bookmarks, one of the best product from Google is Google Bookmarks. Bookmark a page and access the same from any where...

Bookmarking a page is easier when we have Google Toolbar. But, Google Chrome doesn't have Google Toolbar as we can see in other browsers like Internet Explorer and Mozilla Firefox.

I was looking for Google Toolbar kind of feature in Chrome as well, searched in Google itself to find the soultion. But, I couldn't succeed. Finally I have come up with my own solution and with this solution we can Bookmark a page to Google Bookmark easily, more or less similar to Google Toolbar.

Follow the steps explained below to Use Google Bookmark in Chrome:

Part 1: Importing existing Bookmarks

1. Login to your Google Bookmark
2. Click on Export Bookmarks link and save the file in your local system as GoogleBookmarks.html
3. Now, open Bookmark Manager in the Google Chrome (Ctrl + Shift + B)
   
   
   


4. Go To Tools > Import Bookmarks..., Select GoogleBookmarks.html file

Done, that's it. Now you have imported your Google Bookmarks to your Google Chorme Bookmark Bar.

Part 2: Saving new Bookmarks to Google Bookmark

1. Open Bookmark Manager (Ctrl + Shift + B)
2. Right Click on Bookmarks Bar and Select Add Page
3. Enter name as Bookmark to Google
4. In the URL Copy and Paste the Code below and click on OK.
   
   
   javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open("http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk="+c(b.location)+"&title="+c(b.title),"bkmk_popup","left="+((a.screenX||a.screenLeft)+10)+",top="+((a.screenY||a.screenTop)+10)+",height=420px,width=550px,resizable=1,alwaysRaised=1");a.setTimeout(function(){d.focus()},300)})();

   
   
   
   
   
   
   
5. Move the New Bookmark as the First Item and close Bookmark Manager
   

Now, every thing is set. Enjoy creating the Bookmark directly to the Google Bookmark.

Click on the "Bookmark To Google" button on the Bookmark Bar to save the Link in Google Bookmarks. As easy as in Google Toolbar on other browders and at the same time you can Click on the Star button in the Address Bar to save the link to your local Bookmark Manager