Friday, 29 June 2012

Sample Example of JQuery AutoComplete textbox in by using WebMethod|| How to Use AutoComplete textbox in by using JQuery and Webservice.

In this article I am showing about how to use JQuery AutoComplete textbox in .
The following are the step to use AutoComplete textbox in by using JQuery.
1.First design the table name Category with two fields Id,Category as follows:

2.Fill the Category details in table which you want like the below:

3. Open VS2010 and FileàNewàEmpty WebsiteàGive the name as JQueryAutoComplete.
4. Select solutionàRight clickà Add new Item àselect WebFormàDefault.aspx
5. Design the form with two fields one is label and one is Textbox to enter text as follows:

6.Then write the following code in Default.aspx
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head id="Head1" runat="server">
    <title>AutoComplete Text Box with jQuery</title>
    <link href="" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script> 
                <script type="text/javascript">
                    $(document).ready(function() {
                    function SearchText() {
                            source: function(request, response) {
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "Default.aspx/GetAutoCompleteData",
                                    data: "{'CategoryName':'" + document.getElementById('txtCategory').value + "'}",
                                    dataType: "json",
                                    success: function(data) {
                                    error: function(result) {
                                        alert("Error Occurred");
    <form id="form1" runat="server">
   <div class="demo">
<div class="ui-widget">
    <label for="tbAuto">Enter Category Name: </label>
   <input type="text" id="txtCategory" class="auto" />

7. Write the following code in Default.aspx.cs file:
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)


public static List<string> GetAutoCompleteData(string CategoryName)
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=Naresh;Integrated Security=true;Initial Catalog=dbname"))
    using (SqlCommand cmd = new SqlCommand("select Category from Emergency_Category where Category LIKE '%'+@CategoryText+'%'", con))
cmd.Parameters.AddWithValue("@CategoryText", CategoryName);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
return result;

8.Then build the application and run it, you will get output and type any letter in textbox then the output will be like below:

  In the above I entered  ‘a’ letter in textbox then it is showing  all the details of related to ‘a’ from database table Category.

In this way we can implement JQuery AutoComplete in

Thank You…….


  1. When I select the suggestions, it is not populated on the textbox. do you have the code for that?

  2. good, working nice

  3. I looked through a million different iterations of this online for a couple of weeks and was frustrated because none of them worked. Then I stumble across this and it works like a charm. BRAVO.