Home > Developer > JavaScript
AutoCompleteExtender automatically completes the extension. If you use the TextBox function similar to entering search words in google, the project in the search target is displayed in the drop-down box under TextBox.
This extension control needs to be used with Web services, so it involves the use of some web Services (Here we just talk about it, and then carefully talk about the content of web services after it is used)
First, we will introduce several key attributes of AutoCompleteExtender:
A, TargetControlID this attribute is a common attribute of all AjaxControlToolkit, that is, the ID of the target control to be extended (officially speaking)
B. CompletionSetCount this attribute is used to set the number of display results to 10 by default.
C. MinimumPrefixTextLength this attribute is used to set the length of several characters and then call the webService method to display the drop-down list.
D. Set the web Service path to be called in the ServicePath attribute.
E. ServiceMethod. Set the method (function) in the web Service to be called)
F. EnableCaching: whether to cache data on the client. The default value is true.
G. CompletionInterval: the time interval for reading data from the server. The default value is 1000. Unit: milliseconds.
Note: If you are used to setting attributes using a visual control, the attribute is set in AutoCompleteExtender, And the TargetControlId is set for other attributes. Multiple Extenders attributes are set in the corresponding TargetControl, if you are used to writing code, set it in the AutoCompleteExtender code attribute.
Example: 1. Create a page, add the ScriptManager control, a TextBox Control, and an AutoCompleteExtender control.
2. Create a New webService and add a [WebMethod] method.
[WebMethod]
Copy codeThe Code is as follows:
Public string [] GetString (string prefixText, int count ){
System. Collections. Generic. List <string> list = new System. Collections. Generic. List <string> (count );
System. Data. DataSet ds = new System. Data. DataSet ();
// Here is the code for retrieving data in the database. The SqlHelper class is the data base class in the project.
// String strSql = string. Format ("select top {0} name from CengWei where name like '{1} % 'order by name", count, prefixText );
// Ds = SqlHelper. Query (strSql );
// For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++)
//{
// List. Add (ds. Tables [0]. Rows [I] [0]. ToString ());
//}
For (int I = 0; I <count; I ++)
{
List. Add (prefixText + I. ToString ());
}
Return list. ToArray ();
}
Where: must be added to the webService class
[System. Web. Script. Services. ScriptService]
Sample Code: webService retrieves data from a field in the database.
Page code:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "test2.aspx. cs" Inherits = "test2" %>
<% @ Register Assembly = "CrystalDecisions. Web, Version = 10.2.3600.0, Culture = neutral, PublicKeyToken = 692fbea5521e1304"
Namespace = "CrystalDecisions. Web" TagPrefix = "CR" %>
<% @ Register Assembly = "AjaxControlToolkit" Namespace = "AjaxControlToolkit" TagPrefix = "PC3" %>
<! 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> simple dropdownex.pdf </title>
<Link href = "/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css"
Rel = "stylesheet" type = "text/css"/>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: ScriptManager ID = "ScriptManager1" runat = "server" EnableScriptGlobalization = "True" EnableScriptLocalization = "True">
</Asp: ScriptManager>
<Asp: TextBox ID = "TextBox3" runat = "server"> </asp: TextBox>
<Asp: TextBox ID = "TextBox4" runat = "server"> </asp: TextBox>
<C0: AutoCompleteExtender ID = "AutoCompleteExtender2" runat = "server" MinimumPrefixLength = "1"
ServiceMethod = "GetString" ServicePath = "AutoComplete. asmx" TargetControlID = "TextBox2">
</PC3: AutoCompleteExtender>
</Form>
</Body>
</Html>
WebService code:
Using System;
Using System. Web;
Using System. Collections;
Using System. Web. Services;
Using System. Web. Services. Protocols;
/// <Summary>
/// AutoComplete Summary
/// </Summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
// The following is required; otherwise, the function cannot be implemented.
[System. Web. Script. Services. ScriptService]
Public class AutoComplete: System. Web. Services. WebService {
Public AutoComplete (){
// If you use the designed component, uncomment the following line
// InitializeComponent ();
}
[WebMethod]
Public string HelloWorld (){
Return "Hello World ";
}
[WebMethod]
Public string [] GetString (string prefixText, int count ){
System. Collections. Generic. List <string> list = new System. Collections. Generic. List <string> (count );
System. Data. DataSet ds = new System. Data. DataSet ();
// Here is the code for retrieving data in the database. The SqlHelper class is the data base class in the project.
// String strSql = string. Format ("select top {0} name from CengWei where name like '{1} % 'order by name", count, prefixText );
// Ds = SqlHelper. Query (strSql );
// For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++)
//{
// List. Add (ds. Tables [0]. Rows [I] [0]. ToString ());
//}
For (int I = 0; I <count; I ++)
{
List. Add (prefixText + I. ToString ());
}
Return list. ToArray ();
}
}
Please kindly advise if there is anything wrong
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
