AutoComplete from Database using JQuery
Hi
try this example to make JQuery AutoComplete from Database
Step1 :-
First download the following files jquery.autocomplete.js and jquery.autocomplete.css
Step2 :-
Open VS 2005 and create new website and add new Web page and Web.Config and WebHandler with name “AutocompleteData.ashx”
Step3 :-
In AutocompleteData.ashx add the following code :-
<%@ WebHandler Language="C#" >
using System;
using System.Web;
using System.Data.SqlClient;
public class AutocompleteData : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
string firstname = context.Request.QueryString["q"];
string sql = "select top 10 FirstName from Employees where FirstName like '" + firstname + "%'";
using (SqlConnection connection = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated Security=True"))
using (SqlCommand command = new SqlCommand(sql, connection))
{
connection.Open();
using (SqlDataReader reader = command.ExecuteReader())
{
while (reader.Read())
{
context.Response.Write(reader.GetString(0) + Environment.NewLine);
}
}
}
}
public bool IsReusable {
get {
return false;
}
}
}
Note :- i am using Northwind Database in this example
Step4 :-
Open Default.aspx page and Dragr Textbox and change Id = “txt_Search”
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txt_Search").autocomplete("AutocompleteData.ashx"); });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Search :- <asp:TextBox ID="txt_Search" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
and then run your Web page
Hope this helps
Good Lucl.
Yasser Zaid's Weblog 
That is wonderful code. I searched for almost one day to acheiev that. When I get this page. I am done!
You are welcome
Hope my post helps you
Good Luck.
Hi,
Thanks for the great code. I have tried and works like a charm.
I would like to extend this code to be able to send more parameters in the querystring to the ashx like currently only [“q”].
Can this be done? I am trying to put together a user control that can be used against multiple data fields.
Appreciate your suggestions.
Thanks,
Amit.
@Amit : you are welcome hope my post helps you
Hi,
I’m getting continuously script error..Microsoft JScript runtime error: ‘$’ is undefined can u pls help me in this regard very urgent
@santhosh i tried tis eample again and it works with me did you add JQuery.js and autocomplete.js and autocomplete.css in your Page try to add them and try the example again
U all answer r incorrect.So please provide me a good code.Ok Dude
I want comma separated Autocomplete like gmail compose mail, any body here to help me !!!!!!
Awaaaaaaaaaaasum
thanku sir
if i need any explaination on this source code where i get
please tell
Nice And Useful , keep it up 🙂
in VS 2002 is not use so how could we use Handler.ashx code in VS 2002
I am unable to find Jquery.js
I need this code working immediately. Please solve my problem