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.
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:
Final Output: