Friday, 29 June 2012

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


In this article I am showing about how to use JQuery AutoComplete textbox in Asp.net .
The following are the step to use AutoComplete textbox in Asp.net 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>AutoComplete Text Box with jQuery</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
                <script type="text/javascript">
                    $(document).ready(function() {
                        SearchText();
                    });
                    function SearchText() {
                        $(".auto").autocomplete({
                            source: function(request, response) {
                                $.ajax({
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "Default.aspx/GetAutoCompleteData",
                                    data: "{'CategoryName':'" + document.getElementById('txtCategory').value + "'}",
                                    dataType: "json",
                                    success: function(data) {
                                        response(data.d);
                                    },
                                    error: function(result) {
                                        alert("Error Occurred");
                                    }
                                });
                            }
                        });
                    }
                </script>
</head>
<body>
    <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" />
</div>
    </form>
</body>
</html>

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)
{

}
[WebMethod]

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))
{
con.Open();
cmd.Parameters.AddWithValue("@CategoryText", CategoryName);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
    result.Add(dr["Category"].ToString());
}
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 Asp.net.

Thank You…….


3 comments:

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

    ReplyDelete
  2. good, working nice

    ReplyDelete
  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.

    ReplyDelete