AutoCompleteExtender in ASP.NET
Introduction:
In this article Ajax You will know how to use AutoCompleteExtender that which gets the data for every keystroke of your input in the textbox and displays below the textbox from the code behind webservice.
Description:
Microsoft Asp.net extended controls provided a best way of using the controls with respect to the requirement.
After mentioned MinimumPrefixLength property of your autocomplete extender you will find a pop up with all the values what you entered into the textbox.
Note: as we know we have to use asp.net ajax dll for any ajax controls.
What properties have to use to display the autocomplete extender ?
Based on the requirement we have to take the properties but for our example I taken the following properties.
ServiceMethod="SearchCustomers"=> code behind webservice method
MinimumPrefixLength="1" => after entering the first keystroke.
CompletionInterval="100" => how much fast you want to get the data from database with webservice
EnableCaching="false" => for caching the searches (autocomplete)
CompletionSetCount="10"
TargetControlID="txtContactsSearch" =>the textbox for which you want to set the autocompleteextender.
FirstRowSelected = "false" // so that it will get from the second row of the sequence in the followed popup.
ConnectionString: As usual your web.config connection string
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
</asp:ScriptManager>
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtContactsSearch" ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
</cc1:AutoCompleteExtender>
</div>
</form>
</body>
</html>
Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManage.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select EmpFirstName from EmployeeDetails where EmpFirstName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
conn.Open();
List<string> customers = new List<string>();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(sdr["EmpFirstName"].ToString());
}
}
conn.Close();
return customers;
}
}
}
}
Output:
