Hi ,
Today i'm showing you auto complete in asp.net with ajax.
demo
Before v start pls have a go through over this
There are some properties of AutoCompleteExtender control that handles the working of extender. AutoComplete control uses its minimum prefix length property to limit the minimum number of characters typed into the attached textbox. When user enters the characters more than the specified limit then the AutoCompleteExtender generates the list below the textbox control.
You can also enable the caching to reduce the web service calls for similar queries. There is also an option to set the number of items to be returned from the result of web service.
AutoCompleteExtender Properties
TargetControlID: ID of the Textbox control to associate it with AutoComplete Extender.
CompletionInterval: Time interval in milliseconds after which it will display the retrieved results.
CompletionSetCount: Number of items to be returned from the web service.
MinimumPrefixLength: Number of characters required to initiate the web service request.
DelimiterCharacters: Delimiter characters that can be used to separate the items in textbox. You can specify the different characters like comma, space or semi-colon. Just select the one item first time and then type separator in the textbox you will get another set of results.
FirstRowSelected: You can set that the first item of the retrieved results will be selected by default.
EnableCaching: Caching can be enabled to reduce the web service calls for the similar queries.
ServicePath: Path of the web service that will be used with AutoCompleteExtender control.
ServiceMethod: Web service method name that will return the desired result array.
CompletionListCssClass: CSS Class to change the style of dropdown that will display the generated list of results.
CompletionListItemCssClass: CSS class to change the style of list item of retrieved results.
CompletionListHighlightedItemCssClass: CSS Class to change the style of the highlighted item of the list generated by the retrieved results.
Come lets make it live.
step 1
create an aspx file and add reference of ajax to the bin folder
step 2
drag 'n drop a ajax AutoCompleteExtender to the aspx file 'n add the following code to that control.
MinimumPrefixLength="1"
DelimiterCharacters=",:"
CompletionInterval="1000"
CompletionSetCount="20"
UseContextKey="false"
ServiceMethod="GetCountryInfo"
ServicePath="WebService.asmx"
TargetControlID="TextBox1"
Animations=""
ShowOnlyCurrentWordInCompletionListItem="false"
EnableCaching="true"
FirstRowSelected="true"
step 3
add a webservice
step 4
lets move to the coding section on webservice. i create a webmethod @ their
[WebMethod]
public string[] GetCountryInfo(string prefixText)
{
int count = 0;
string[] items = null;
DataTable dt = null;
try
{
string sql = "Select DISTINCT[strcountry] from mst_tble Where strcountry like @prefixText";
SqlDataAdapter da = new SqlDataAdapter(sql, "Password=****;User ID=sa;Initial Catalog=country;Data Source=localhost");
da.SelectCommand.Parameters.Add("@prefixText", SqlDbType.VarChar, 50).Value = "%" + prefixText + "%";
dt = new DataTable();
da.Fill(dt);
count = (dt.Rows.Count == 0 ? 1 : dt.Rows.Count);
items = new string[count];
if (dt.Rows.Count == 0)
{
string v = "No match Found";
items.SetValue(v, 0);
}
else
{
int i = 0;
foreach (DataRow dr in dt.Rows)
{
items.SetValue(dr["strcountry"].ToString(), i);
i++;
}
}
}
catch (Exception ex)
{
}
return items;
}
don't forgot to add this code.It will b their but it wil be commented
[System.Web.Script.Services.ScriptService]
Have a nice day... 'N happy Coding :)
