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 WebMethod in ASP.NET

Author: Rachel Nicole
Download Source Code : 1375_JQueryAutocompleteWebMethod.zip

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

 

jQuery autocomplete plug-in can be used with WebMethod of a Web service. In my previous article on DevASP.NET, I have explained about autocomplete plug-in and how to use it with Generic Handler in ASP.NET. In this article, I will show how we can use it with WebMethod.

 

  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 > Web Service
  8. Write code below in Web Service

    C#
     
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Data.SqlClient;
     
    ///
    /// Summary description for WebService
    ///
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService {
     
        public WebService () {
     
            //Uncomment the following line if using designed components
            //InitializeComponent();
        }
     
        [WebMethod]
        public List<string> GetProducts(string search)
        {
            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);
     
            List<string> list = new List<string>();
            SqlDataReader reader = command.ExecuteReader();
     
            while (reader.Read())
            {
                string product = reader["ProductName"].ToString();
                list.Add(product);
            }
     
            return list;
        }
    }
     
     
    VB.NET
     
    Imports System.Web
    Imports System.Web.Services
    Imports System.Web.Services.Protocols
    Imports System.Data.SqlClient
     
    ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    <System.Web.Script.Services.ScriptService()> _
    <WebService(Namespace:="http://tempuri.org/")> _
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
     Public Class WebService
        Inherits System.Web.Services.WebService
     
        <WebMethod()> _
        Public Function GetProducts(ByVal search As String) As List(Of String)
            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 list As New List(Of String)()
            Dim reader As SqlDataReader = command.ExecuteReader()
     
            While reader.Read()
                Dim product As String = reader("ProductName").ToString()
                list.Add(product)
            End While
     
            Return list
        End Function
     
    End Class
     
     
    I have written a function to get data from Products of NORTHWIND database. This function returns a List of string and accepts a string parameter of user typed characters in the TextBox.
     
  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({
                source: function (request, response) {
                    $.ajax({
                        url: "WebService.asmx/GetProducts",
     
                        data: "{ 'search': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                         
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        });
    </script>
     
    To call a WebMethod, the type should be POST and contentType should set to “application/json; charset=utf-8”. 
     
  11. Now you can see it in your browser. 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to insert records into and display records from MS Access database in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net