Twitter TypeAhead Example with database in asp .net

In this asp .net tutorial we will learn how to use Twitter TypeAhead Jquery plugin with database to create auto-complete functionality. Twitter typeahead is a free open source auto-complete library to create auto-complete functionality in Textbox control.

Step1: Create a new asp .net website.

Step2: Create a database.
In this example we will use list of countries as database. You can use any data of your choice.

CREATE TABLE [dbo].[Country](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[CountryName] [nvarchar](50) NULL,
 CONSTRAINT [PK_Country] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Step3: Add refrence to following javascript and CSS files between your head section of page.

Note: I have used online CDN (Content delivery network) for Javascript files. These Javascript files will only works if you have internet connection. If you want to use this example without internet connection you can download these Javascript files to your local project.

Step4: Create a Texbox in your website page.

Step5: Add following jquery just code above body closing tag.
This will initiate Typeahead plugin and also sends parameters for search and location of remote location to get data.

Step6: Add a Generic handler to process the request and to return the result.



Add following code in your Genric handler:

 public void ProcessRequest(HttpContext context)
    {
        string prefixText = context.Request.QueryString["q"];

        context.Response.ContentType = "application/json";

        List countries = new List();

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString);
        string cmdText = "SELECT CountryName FROM country WHERE CountryName LIKE'" + prefixText + "%'";
        SqlCommand cmd = new SqlCommand(cmdText, con);
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }
        List obj = new List();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                obj.Add(dr["CountryName"].ToString().Trim());
            }
        }

        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();

        context.Response.Write(jsSerializer.Serialize(obj));

        con.Close();
    }

Step7: Create a new CSS file in your website and add following code. 

/*AutoComplete flyout */

.autocomplete_completionListElement {
    margin: 0px!important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
    }

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem {
    background-color: #ffff99;
    color: black;
    padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem {
    background-color: window;
    color: windowtext;
    padding: 1px;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
  font:15px Verdana;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

Final output: