Aug 29, 2010

JQuery AutoComplete Text Extender

In this article I’ll be explaining how to use jQuery AutoComplete Plugin in ASP.Net. Using jQuery we can easily create AutoComplete Textbox without writing much code.

You can download jquery jquery.autocomplete.zip from here and add in your project.























Add a GenericHanndler in your project and rename it as AutoComplete.ashx
Now Add following code

CSSCLASS

.ac_results {

padding: 0px;

border: 1px solid black;

background-color: white;

overflow: hidden;

z-index: 99999;

}

.ac_results ul {

width: 100%;

list-style-position: outside;

list-style: none;

padding: 0;

margin: 0;

}

.ac_results li {

margin: 0px;

padding: 2px 5px;

cursor: default;

display: block;

/*

if width will be 100% horizontal scrollbar will apear

when scroll mode will be used

*/

/*width: 100%;*/

font: menu;

font-size: 12px;

/*

it is very important, if line-height not setted or setted

in relative units scroll will be broken in firefox

*/

line-height: 16px;

overflow: hidden;

}

.ac_loading {

background: white url('indicator.gif') right center no-repeat;

}

.ac_over {

background-color: #0A246A;

color: white;

}

.ac_results strong { font-weight:bold; color:#3399FF; }


public class AutoComplete : IHttpHandler {

public void ProcessRequest (HttpContext context) {

string prefixText = context.Request.QueryString["q"];

using (SqlConnection conn = new SqlConnection())

{

conn.ConnectionString = ConfigurationManager

.ConnectionStrings["ConnectionString"].ConnectionString;

using (SqlCommand cmd = new SqlCommand())

{

cmd.CommandText = "Select Subject From FileMaster where subject like('%" + prefixText + "%')";

cmd.Connection = conn;

StringBuilder sb = new StringBuilder();

conn.Open();

using (SqlDataReader sdr = cmd.ExecuteReader())

{

while (sdr.Read())

{

sb.Append(sdr["Subject"])

.Append(Environment.NewLine);

}

}

conn.Close();

context.Response.Write(sb.ToString());

}

}

}

public bool IsReusable {

get {

return false;

}

}

}






If you want to add this in GridView then do this



0 comments: