Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use jQuery autocomplete plug-in with Generic Handler in ASP.NET

Author: Rachel Nicole
Download Source Code : 1365_JQueryAutoComplete.zip

I will show how to use jQuery autocomplete plug-in with Generic Handler in this article.

 

jQuery has some really cool features and one of them is autocomplete. It gives the opportunity to users to write some initial characters in the input field and select any value from available list of values on the bases of entered characters. It is a plug-in available to download in a JavaScript file. You can use it according to your requirements. You can get data from database to show for entered value or you can use it for hard coded values. It can be used with a generic handler file or with web service WebMethod. In this article, I will use a generic handler for jQuery autocomplete feature and I will implement it on a TextBox control.

 

Let’s see how we can use jQuery autocomplete plugin with generic handler.
 
  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C#  > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and jQuery autocomplete plug-in and include below files in this folder.

    jquery-1.4.1.min.js
    jquery.autocomplete.min.js
     
  6. Add a <script> tag in between <head> tag of Default.aspx page. You have to give reference for jQuery and jQuery autocomplete plug-in as below.

    <head runat="server">
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.autocomplete.min.js"></script>
    </head>
     
  7. Right click on web site > Add New Item > Generic Handler (Name the Generic Handler as “Products.ashx”).
     
  8. Write code below in Products.ashx

    C#
     
    <%@ WebHandler Language="C#" Class="Products" %>
     
    using System;
    using System.Web;
    using System.Data;
    using System.Data.SqlClient;
    using System.Text;
     
    public class Products : IHttpHandler {
       
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/plain";
            string search = context.Request.QueryString["value"];
           
            string cmdText = "SELECT ProductName FROM Products WHERE ProductName LIKE '%" + search + "%'";
            string myConnection = "Data Source=Local;Initial Catalog=C:\\SQL SERVER 2000 SAMPLE DATABASES\\NORTHWND.MDF;Integrated Security=True";
            SqlConnection connection = new SqlConnection(myConnection);
            connection.Open();
            SqlCommand command = new SqlCommand(cmdText, connection);
            SqlDataReader reader = command.ExecuteReader();
     
            StringBuilder sBuilder = new StringBuilder();
            
            while (reader.Read())
            {
                sBuilder.Append(reader["ProductName"]);
                sBuilder.Append(Environment.NewLine);
            }
     
            context.Response.Write(sBuilder.ToString());
            connection.Close();
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }
     
    }
     
    VB.NET
     
    <%@ WebHandler Language="VB" Class="Products" %>
     
    Imports System
    Imports System.Web
    Imports System.Data
    Imports System.Data.SqlClient
    Imports System.Text
     
    Public Class Products : Implements IHttpHandler
       
        Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
            context.Response.ContentType = "text/plain"
           
            Dim search As String = context.Request.QueryString("value")
     
            Dim cmdText As String = "SELECT ProductName FROM Products WHERE ProductName LIKE '%" + search + "%'"
            Dim myConnection As String = "Data Source=Local;Initial Catalog=C:\SQL SERVER 2000 SAMPLE DATABASES\NORTHWND.MDF;Integrated Security=True"
            Dim connection As New SqlConnection(myConnection)
            connection.Open()
            Dim command As New SqlCommand(cmdText, connection)
            Dim reader As SqlDataReader = command.ExecuteReader()
     
            Dim sBuilder As New StringBuilder()
     
            While reader.Read()
                sBuilder.Append(reader("ProductName"))
                sBuilder.Append(Environment.NewLine)
            End While
     
            context.Response.Write(sBuilder.ToString())
            connection.Close()
        End Sub
     
        Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Get
                Return False
            End Get
        End Property
     
    End Class
     
    I have used QueryString parameter to accept request from jQuery. This value will be used in our query to get data from database. I have established connection with SQL Server NORTHWIND database and get data. I have used StringBuilder object to build a string for product names. Each product name will be displayed in separate line.
     
  9. Add a TextBox in Default.aspx 

    Write Product Name:
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

     
  10. Add another<script> tag in between <head> tag and write code below in it.

    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=TextBox1.ClientID%>").autocomplete('Products.ashx');
        });
    </script>

     
    In above script, I have accessed TextBox by its ClientID and call the autocomplete() method by providing our generic handler.
     
  11. Now you can see it in your browser. 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to read a CSV file and display on GridView in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net