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

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

Author: Rachel Nicole
Download Source Code :

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.

  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>
  7. Right click on web site > Add New Item > Web Service
  8. Write code below in Web Service

    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 = "")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    public class WebService : System.Web.Services.WebService {
        public WebService () {
            //Uncomment the following line if using designed components
        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);
            SqlCommand command = new SqlCommand(cmdText, connection);
            List<string> list = new List<string>();
            SqlDataReader reader = command.ExecuteReader();
            while (reader.Read())
                string product = reader["ProductName"].ToString();
            return list;
    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:="")> _
    <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)
            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()
            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) {
                        url: "WebService.asmx/GetProducts",
                        data: "{ 'search': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                        error: function (result) {
    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