How to Create Auto Complete Textbox using Asp.net with Jquery

In aspx

<script type="text/javascript">
        $(function () {
            $("#<%=txtArea.ClientID%>").autocomplete({
                source: function (request, response) {
                    var area = $('[id$=txtArea]').val();
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "AreaWiseReport.aspx/GetAutoCompleteDataByArea",
                        data: "{'area':'" + area + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Check No");
                        }
                    });
                }
            });
        });
 
    </script>

In aspx.cs

[WebMethod]
        public static List<string> GetAutoCompleteDataByRegNo(string area)
        {
            List<string> result = new List<string>();
            using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand("select DISTINCT AreaName from Mater_Area where AreaName LIKE '%'+@SearchText+'%'", con))
                {
                    con.Open();
                    cmd.Parameters.AddWithValue("@SearchText", AreaName);
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        result.Add(dr["AreaName"].ToString());
                    }
                    return result;
                }
            }
        }



Here Replace System.Configuration.ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString  as  your Connection String

AreaName  as your column Name, which column you want to get autocomplete

Mater_Area as your Table Name

Add Jquery in your aspx

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">