Introduction:
Here I will explain how to use Ajax AutoCompleteExtender without using webservice to display the words begin with prefix typed into the textbox using asp.net
Description:
In previous article I explained clearly how to implement AjaxAutoCompleteExtender with webservice. 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 without using Webservice.
Here I will explain how to use Ajax AutoCompleteExtender without using webservice to display the words begin with prefix typed into the textbox using asp.net
Description:
In previous article I explained clearly how to implement AjaxAutoCompleteExtender with webservice. 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 without using Webservice.
First design table in your database like this
Column Name
|
Data Type
|
Allow Nulls
|
ID
|
Int(set identity property=true)
|
No
|
CountryName
|
Varchar(50)
|
Yes
|
After completion of design table in database add AjaxControlToolkit reference to your application after that add
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
|
Our aspx page code like this
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax AutoCompleteExtender without Webservice</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtCountry"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries" >
</ajax:AutoCompleteExtender>
</div>
</form>
</body>
</html>
|
Here
if you observe above code for autocompleteextender I declared different
properties now I will explain each property clearly
TargetControlID - The TextBox control where the user types content to be automatically completed.
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.
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 following namcespaces in your code behind page
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Configuration;
|
After completion of adding namespaces write the following code in codebehind
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static string[] GetName(string prefixText){ SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString()); cn.Open(); DataTable dt = new DataTable(); dt.Reset(); dt.Clear(); SqlDataAdapter da = new SqlDataAdapter("select name from emp where name like '" + prefixText + "%'", cn); da.Fill(dt); string[] s = new string[dt.Rows.Count]; for (int i = 0; i < dt.Rows.Count; i++) { s[i] = dt.Rows[i][0].ToString(); } return s; } |
Note: Use same parameter name string prefixText in GetName (string prefixText) method.
Demo
Demo
 |
Download sample code attached
No comments:
Post a Comment