jQuery autocomplete example using asp.net C#

jQuery is very powerful JavaScript framework. jQuery include many ready-made and pre-developed functionality that we can easily use in our application. We already discuss in our last article How to call server side function using jquery or you can prefer Insert data example with jquery ,json and ajax callback in asp.net. 
In this article we are sharing jQuery Autocomplete Example using asp.net Search Terms Example using asp.net C#. We will take advantage of jQuery's inbuilt autocomplete function. We will use jquery.AutoComplete and WebMethods to access server side functions in asp.net.
We have used Category table from NorthWind Database You can download it from Here. Using WebMethods and JSON you can easily access server side events.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery AutoComplete with Highlight Search Term using Asp.net</title>
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#txtAutoComplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetCategory",
                        data: "{'term':'" + $("#txtAutoComplete").val() + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txtAutoComplete" />
        </div>
    </form>
</body>
</html>


Default.aspx.cs
[WebMethod]
    public static string[] GetCategory(string term)
    {
        List retCategory = new List();
        string ConnectionString = @"Enter Your ConnectionString";
        using (SqlConnection con = new SqlConnection(ConnectionString))
        {
            string query = string.Format("select CategoryName from Categories where CategoryName Like '%{0}%'", term);
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                con.Open();
                SqlDataReader reader = cmd.ExecuteReader();

                while (reader.Read())
                {
                    retCategory.Add(reader.GetString(0));
                }
            }
            con.Close();
        }
        return retCategory.ToArray();
    }
Demo
jquery-autocomplete-example-in-asp.net-C%23-img-pic
Download Sample Code