In this article I will explain what Ajax
autocompleteextender with Example in asp.net
AutoComplete Extender:
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 words that begin with the
prefix typed into the textbox.
The
dropdown with candidate words supplied by a web service is positioned on the
bottom left of the text box.
Syntax:
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1"
runat="server"
TargetControlID="TextBox1"
ServicePath="WebService.asmx" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1"
CompletionInterval="1000" ServiceMethod="GetCityName" OnClientPopulating="ShowProcessImage"
OnClientPopulated="HideProcessImage">
</ajax:AutoCompleteExtender>
Example:
Below
is the code for page design.
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajax"
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax AutoCompleteExtender Sample</title>
<script type="text/javascript">
function ShowProcessImage() {
var autocomplete =
document.getElementById('TextBox1');
autocomplete.style.backgroundImage
= 'url(loading1.gif)';
autocomplete.style.backgroundRepeat
= 'no-repeat';
autocomplete.style.backgroundPosition
= 'right';
}
function HideProcessImage() {
var autocomplete =
document.getElementById(' TextBox1');
autocomplete.style.backgroundImage
='none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServicePath="WebService.asmx"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries" OnClientPopulating="ShowProcessImage" OnClientPopulated="HideProcessImage"
>
</ajax:AutoCompleteExtender>
</div>
</form>
</body>
</html>
Below is the webservice code:
using
System.Configuration;
using System.Data;
using
System.Data.SqlClient;
using
System.Collections.Generic;
using
System.Web.Services;
/// <summary>
///
Summary description for WebService
/// </summary>
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
// To allow this Web
Service to be called from script, using ASP.NET AJAX, uncomment the following
line.
[System.Web.Script.Services.ScriptService]
public class WebService :
System.Web.Services.WebService
{
public
WebService()
{
//Uncomment
the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public List<string>
GetCityName(string prefixText)
{
SqlConnection
Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
Connection.Open();
SqlCommand
cmd = new SqlCommand("select CityName from tblCity where CityName like
@Name+'%'", Connection);
cmd.Parameters.AddWithValue("@Name", prefixText);
SqlDataAdapter
da = new SqlDataAdapter(cmd);
DataTable
dt = new DataTable();
da.Fill(dt);
List<string> CountryNames = new
List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
CountryNames.Add(dt.Rows[i][0].ToString());
}
return
CountryNames;
}
}
DataBase
Connection:
<connectionStrings>
<add name="con" connectionString="Data Source=LocalHost;Integrated
Security=true;Initial Catalog=DBName"/>
</connectionStrings >
Properties:
The textbox is linked with an AutoCompleteExtender
which is initialized with this code.
1. TargetControlID - The TextBox control where the
user types content to be automatically completed (Ex : txtCountry)
2. ServiceMethod - The
web service method to be called. The signature of this method must match the
following:
[System.Web.Script.Services.ScriptService]
public List<string> GetCountries(string
prefixText)
3. ServicePath
- The
path to the web service that the extender will pull the word\sentence
completions from.
4. EnableCaching- Caching is turned on, so typing the
same prefix multiple times results in only one call to the web service.
5. MinimumPrefixLength- Minimum number of characters
that must be entered before getting suggestions from the web service.
6. CompletionInterval - Time in milliseconds when the timer
will kick in to get suggestions using the web service.
7. CompletionSetCount - Number of suggestions to be
retrieved from the web service.
8. OnClientPopulating - This one used to display
progress image in textbox during getting the data from database using web
service.
9. OnClientPopulated - This one used to hide progress
image in textbox after finishing data retrieval from database.
10. DelimiterCharacters - Specifies one or more
character(s) used to separate words. The text in the AutoComplete textbox is tokenized
using these characters and the webservice completes the last token.
11. FirstRowSelected -
Determines if the first option in the AutoComplete list will be selected by
default.
No comments:
Post a Comment