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. 
  
You can also achieve textbox Autocomplete functionality by various other means, one method is explained here using Twitter TypeAhead.
  
 
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.
 

 
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.
 
 



 
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:
 
        
 
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 getCustomerNames(string prefixText)
    {
        List customers = new List();

        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;
    }
 
Step5:  Call Webmethod using Jquery and bind values for Jquery Autocomplete.Put this code between your page’s head tag.
 
 
 
For more information about how to call code behind method using jquery you can follow this article:
 
 
Thanks. For more options available in Jquery Autocomplete you can visit: http://jqueryui.com/autocomplete/
 
Final Output:
 
textbox-autocomplete-using-jquery-example-in-asp-net

 

We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
8 + 6 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2019 CodingFusion
75 Important SQL Server queries you should know