Introduction:
Here I will explain how to use Ajax AutoCompleteExtender to display the words begin with prefix typed into the textbox using asp.net
Description:
In Google if we type anything in search textbox we will find all related words below the textbox it has developed by using Ajax autocomplete extender. We can attach Ajax autocomplete exteneder to any textbox to implement this and after assign autocomplete extender to textbox and type more content than the specified minimum word length, a popup will show words or phrases starting with that value. So the user can choose exact word from the popup panel. Here we are implementing autoCompleteextender to fetch data from the database through a Webservice.
Here I will explain how to use Ajax AutoCompleteExtender to display the words begin with prefix typed into the textbox using asp.net
Description:
In Google if we type anything in search textbox we will find all related words below the textbox it has developed by using Ajax autocomplete extender. We can attach Ajax autocomplete exteneder to any textbox to implement this and after assign autocomplete extender to textbox and type more content than the specified minimum word length, a popup will show words or phrases starting with that value. So the user can choose exact word from the popup panel. Here we are implementing autoCompleteextender to fetch data from the database through a Webservice.
First design table in your database like this
Data Type
|
Allow Nulls
| |
ID
|
Int(set identity property=true)
|
No
|
CountryName
|
Varchar(50)
|
Yes
|
After that add AjaxControlToolkit to your bin folder and design your aspx page like this
<%@ 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('txtCountry');
autocomplete.style.backgroundImage = 'url(loading1.gif)';
autocomplete.style.backgroundRepeat = 'no-repeat';
autocomplete.style.backgroundPosition = 'right';
}
function HideProcessImage() {
var autocomplete = document.getElementById('txtCountry');
autocomplete.style.backgroundImage ='none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtCountry" ServicePath="WebService.asmx"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries" OnClientPopulating="ShowProcessImage" OnClientPopulated="HideProcessImage" >
</ajax:AutoCompleteExtender>
</div>
</form>
</body>
</html>
|
Here
if you observe above code for autocompleteextender I have declared
different properties I will explain each property clearly
TargetControlID - The TextBox control where the user types content to be automatically completed.
ServiceMethod - The web service method to be called to fetch the records from database. The signature of this method must match the following:
[System.Web.Script.Services.ScriptService]
public List<string> GetCountries(string prefixText)
|
Or
[System.Web.Script.Services.ScriptService]
public List<string> GetCountries(string prefixText, int count)
|
We can replace " GetCountries " with a name of your choice, but the return type and parameter name and type must exactly match, including case.
ServicePath - The path to the web service that the extender will pull the word\sentence completions from.
EnableCaching- Caching is turned on, so typing the same prefix multiple times results in only one call to the web service.
MinimumPrefixLength- Minimum number of characters that must be entered before getting suggestions from the web service.
CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.
CompletionSetCount - Number of suggestions to be retrieved from the web service.
OnClientPopulating - This one used to display progress image in textbox during getting the data from database using web service.
OnClientPopulated - This one used to hide progress image in textbox after finishing data retrieval from database.
Don’t
get confuse I explained all the properties details only it’s very
simple to implement auto completion textbox after completion of your
aspx page design add one new webservice page to your application and add following namcespaces in your webservice code behind page
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
|
After completion of writing namespaces and write the following code in webservice page
/// <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> GetCountries(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select * from Country where CountryName like @Name+'%'",con);
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][1].ToString());
}
return CountryNames;
}
}
|
 |
Download sample code attached
No comments:
Post a Comment