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.

Twitter-TypeAhead-example-with-database-in-asp-net

 

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.

Twitter-TypeAhead-example-with-database-in-asp-net

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:

 

Twitter-TypeAhead-example-with-database-in-asp-net

 

We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.
It's Not working .Can you send me the page and the generic controls
1-Aug-2014 From  Kumar Prateek
Hi Prateek files uploaded you can download complete source code for autocomplete textbox using asp .net and twitter typeahead
13-Aug-2014 From  Anuj

Give your valuable comments.

Name
Email
Comment
8 + 2 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2019 CodingFusion
75 Important SQL Server queries you should know