AutoCompleteExtender in ASP.Net

Rahul Prajapat
9y
25k
0
1
100
Article

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control and will associate that control with a Popup panel to display a result returned from web services or retrieved from a database on the basis of text in a TextBox.

The Dropdown with name retrieved from the database or web service is positioned on the bottom-left of the TextBox.

Some Important properties of AutoCompleteExtender:

TargetControlID: The TextBox control Id where the user types text to be automatically completed.
EnableCaching: Whether client-side caching is enabled.
CompletionSetCount: Number of suggestions to be retrieved from the web service.
MinimumPrefixLength: Minimum number of characters that must be entered before getting suggestions from a web service.
CompletionInerval: Time in milliseconds when the timer will kick in to get a suggestion using the web service.
ServiceMethod: The web service method to be called.
FirstRowSelected: Whether the first row is selected from the suggestion.

Example

Step 1

First we need to create a table like the following:

Create table Friend(
iId int identity(1,1) primary key,
nvName nvarchar(50)
)

Step 2

table

Step 3

Create a website, then add a Web Form and copy the code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example.aspx.cs" Inherits="Example" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 style="background-color:lightgray">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:AutoCompleteExtender ServiceMethod="GetSearch" MinimumPrefixLength="1" CompletionInterval="10"
EnableCaching="false" CompletionSetCount="10" TargetControlID="TextBox1" ID="AutoCompleteExtender1"
runat="server" FirstRowSelected="false">
</asp:AutoCompleteExtender>
<asp:Label ID="Label1" runat="server" Text="Search Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

Step 4

Write the following code in the aspx.cs page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Example : System.Web.UI.Page
{
static SqlConnection con = new SqlConnection("data source=.\\sqlexpress;
initial catalog=example;integrated security=true;"); //Create a Sql connection
static SqlDataAdapter da;
static DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetSearch(string prefixText)
{
DataTable Result = new DataTable();
string str = "select nvName from Friend where nvName like '" + prefixText + "%'";
da = new SqlDataAdapter(str, con);
dt = new DataTable();
da.Fill(dt);
List<string> Output = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
Output.Add(dt.Rows[i][0].ToString());
return Output;
}
}