Home > ASP.Net, Jquery > AutoComplete from Database using JQuery

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.

About these ads
Categories: ASP.Net, Jquery
  1. Ahmad
    January 28, 2010 at 8:26 am | #1

    That is wonderful code. I searched for almost one day to acheiev that. When I get this page. I am done!

  2. yasserzaid
    January 28, 2010 at 12:00 pm | #2

    You are welcome
    Hope my post helps you
    Good Luck.

  3. Amit
    April 22, 2010 at 11:28 am | #3

    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.

  4. yasserzaid
    May 1, 2010 at 7:55 pm | #4

    @Amit : you are welcome hope my post helps you

  5. santhosh
    May 10, 2010 at 2:42 pm | #5

    Hi,
    I’m getting continuously script error..Microsoft JScript runtime error: ‘$’ is undefined can u pls help me in this regard very urgent

  6. yasserzaid
    May 10, 2010 at 7:09 pm | #6

    @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

  7. November 24, 2010 at 10:28 am | #7

    U all answer r incorrect.So please provide me a good code.Ok Dude

  8. biswaranjan
    July 27, 2011 at 5:23 am | #8

    I want comma separated Autocomplete like gmail compose mail, any body here to help me !!!!!!

  9. Chaithu
    April 30, 2012 at 1:48 pm | #9

    Awaaaaaaaaaaasum

  10. dinesh_virani
    June 9, 2012 at 10:36 am | #10

    thanku sir
    if i need any explaination on this source code where i get
    please tell

  11. Mazen Abu Shehab(.Net Developer)
    August 15, 2012 at 1:26 am | #11

    Nice And Useful , keep it up :)

  12. rohit
    January 4, 2013 at 6:01 am | #12

    in VS 2002 is not use so how could we use Handler.ashx code in VS 2002

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 35 other followers

%d bloggers like this: