Textbox autocomplete using jquery in asp .net

In this asp net tutorial we will learn how to use Jquery Autocomplete. Jquery Autocomplete is a very useful plugin which allows users to quickly search and select from list of values when they type into texbox control.

Whenever user starts typing in Autocomplete enabled textbox he will see a list of suggestions based on the characters he has typed in the textbox. After getting the desired result user can select required value from the autocomplete list which will displayed in the textbox.
   

You can provide static values in the form of array or you can also bind Jquery Autocomplete with database. In this tutorial we will bind our Jquery Autocomplete plugin with database. I will use northwind database for the demonstration purpose you can choose your own database. 

Lets get started with sample application: 

Step1: Create a new asp .net website.

Step2: Create a default.aspx page and create a textbox control in it.

<asp:textbox runat="server" id="txtAutoComplete" cssclass="autosuggest"></asp:textbox>




Step3:  Add neccessary Jquery and Css files. Here I am using CDN(Content Delivery Network) for Jquery and CSS files. You can use CDN or you can download files from Jquery website to your project. Put this code between “Head” tag.




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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/jqueryui/1.8.1/jquery-ui.min.js"></script>

Step4: Write a method to get list of employees from database and return to Jquery Autocomplete. For this example I am using WebMethod to get and return list of employees from Northwind database.



Add Connection String:




<connectionstrings>      <add name="myConnection" connectionstring="Data Source=Sqlservername;user id=sa;password=yourpassword;Initial Catalog=Northwind"></add>  </connectionstrings>




Add following namespaces:







using System.Web.Services;


using System.Data.SqlClient;

using System.Configuration;



Create Following method in Default.aspx.cs page:







[WebMethod]


    public static List<string> getCustomerNames(string prefixText)

    {

        List<string> customers = new List<string>();



        using (SqlConnection conn = new SqlConnection())

        {

            conn.ConnectionString = ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString;

            using (SqlCommand cmd = new SqlCommand())

            {

                cmd.CommandText = "select contactName As Name  from Customers where " +

                "contactName like @SearchText + '%'";

                cmd.Parameters.AddWithValue("@SearchText", prefixText);

                cmd.Connection = conn;

                conn.Open();

                using (SqlDataReader dr = cmd.ExecuteReader())

                {

                    while (dr.Read())

                    {

                        customers.Add(dr["Name"].ToString());

                    }

                }

                conn.Close();

            }



        }

        return customers;

    }</string></string></string>





Step5:  Call Webmethod using Jquery and bind values for Jquery Autocomplete.Put this code between your page’s head tag.




<script type="text/javascript">
       $(document).ready(function () {
           SearchText();
       });
       function SearchText() {
           $(".autosuggest").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       url: "Default.aspx/getCustomerNames",
                       data: "{'prefixText':'" + document.getElementById('txtAutoComplete').value + "'}",
                       dataType: "json",
                       success: function (data) {
                           response(data.d);
                       },
                       error: function (result) {
                           alert("Error");
                       }
                   });
               }
           });
       }
   </script>