Monday, February 27, 2017

Auto Complete textbox using jquery and asp .net

Hi in this post we are going to see "How to create a AutoComplete Textbox using JQuery and asp.Net".For this tutorial I am using Northwnd database "Categories" table.To download NorthWnd database follow this link.

To download jquery follow this link.

To download jquery ui follow this link.

Html Tag:

The following tag consist of autocomplete asp.net textbox.

<%@ 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 runat="server">
    <title>Jquery AutoComplete TextBox Demo</title>
    <link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <h2>Jquery Auto Complete TextBox Demo</h2>
    <hr>
    <form id="form1" runat="server">
    <div>
    <label id="lblname">Categories:</label>
    <asp:TextBox ID="txtCategories" runat="server"></asp:TextBox>
    </div>
    </form>

    <script>
        $(document).ready(function () {
            SearchTextBox();
        });
        function SearchTextBox() {
            $("#txtCategories").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetBeverageDetails",
                        data: "{'sBeverageDetails':'" + document.getElementById('txtCategories').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("No Match");
                        }
                    });
                }
            });
        }
    </script>
</body>
</html>

WebMethod:

Webmethod to populate asp autocomplete textbox using jquery.

[WebMethod]
    public static List<string> GetBeverageDetails(string sBeverageDetails)
    {
        List<string> LBeverageDetails = new List<string>();
        using (SqlConnection con = new SqlConnection(@"Data Source=DESKTOP-K63BM8V\GAMER;Integrated Security=true;Initial Catalog=NORTHWND;"))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select CategoryName from Categories where CategoryName LIKE ''+@SearchBeverageName+'%'";
                cmd.Connection = con;
                con.Open();
                cmd.Parameters.AddWithValue("@SearchBeverageName", sBeverageDetails);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    LBeverageDetails.Add(dr["CategoryName"].ToString());
                }
                con.Close();
                return LBeverageDetails;
            }
        }
    }//.End

Output:




Download Source Code



Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)