AjaxControlToolkit is a set of controls, can realize automatic filling text box, click the text box to pop up the calendar, add watermarks and other Ajax effect, contains more than 40 controls, the specific implementation effect such as: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx
Like Baidu search, the AutoCompleteExtender control in the AjaxControlToolkit is easy to implement based on the user input to automatically associate related words. The effect is as follows:
Detailed steps:
I. Install AjaxControlToolkit in
Install the AjaxControlToolkit in VS (pay attention to version issues ):
Installation: http://www.asp.net/ajaxlibrary/act.ashx
Corresponding version prompt: http://ajaxcontroltoolkit.codeplex.com/
Ii. Call AutoCompleteExtender on the Web page(The second line of code should be Register in advance on the page)
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx. cs" Inherits = "HTML_editor.WebForm1" %>
<% @ Register TagPrefix = "asp" Namespace = "AjaxControlToolkit" Assembly = "AjaxControlToolkit" %>
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: ToolkitScriptManager ID = "ToolkitScriptManager1" runat = "Server"/>
<Asp: TextBox ID = "TextBox1" runat = "server"> </asp: TextBox>
<Asp: AutoCompleteExtender ID = "AutoCompleteExtender1" runat = "server"
TargetControlID = "TextBox1"
CompletionSetCount = "10"
EnableCaching = "true"
MinimumPrefixLength = "1"
CompletionInterval = "100"
ServicePath = "WebService. asmx"
ServiceMethod = "GetEnglishName">
</Asp: AutoCompleteExtender>
</Div>
</Form>
</Body>
</Html>
3. Add Web Service WebService. asmx
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Data. SqlClient;
Using System. Linq;
Using System. Web;
Using System. Web. Script. Services;
Using System. Web. Services;
Namespace HTML_editor
{
/// <Summary>
/// Summary of WebService
/// </Summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
[System. ComponentModel. ToolboxItem (false)]
// To allow ASP. net ajax to call this Web service from a script, uncomment the following line.
[System. Web. Script. Services. ScriptService]
Public class WebService: System. Web. Services. WebService
{
// Read matching information from the database
[WebMethod]
[ScriptMethod]
Public string [] GetEnglishName (string prefixText, int count)
{
List <string> suggestions = new List <string> (); // declare a generic set
SqlConnection con = new SqlConnection ("server =.; database = Attendance; uid = sa; pwd = ;");
Con. Open ();
SqlCommand com = new SqlCommand ("select [EnglishName] from [Employee] where [EnglishName] like '% t %' order by [EnglishName]", con );
SqlDataReader sdr = com. ExecuteReader ();
While (sdr. Read ())
{
Suggestions. Add (sdr. GetString (0 ));
}
Sdr. Close ();
Con. Close ();
Return suggestions. ToArray ();
}
// Directly generate matching information using methods
// [WebMethod]
// Public string [] GetCompleteList (string prefixText, int count)
//{
// Char c1, c2, c3;
// If (count = 0)
// Count = 10;
// List <String> list = new List <string> (count );
// Random rnd = new Random ();
// For (int I = 1; I <= count; I ++)
//{
// C1 = (char) rnd. Next (65, 90 );
// C2 = (char) rnd. Next (1, 97,122 );
// C3 = (char) rnd. Next (97,122 );
// List. Add (prefixText + c1 + c2 + c3 );
//}
// Return list. ToArray ();
//}
}
}
4. Complete. Run the Web page to see the auto-complementing effect of the text box. Note the following::
AutoCompleteExtender control parameter description:
1. TargetControlID: Specifies the control to implement the prompt function;
2. ServicePath: the path of the WebService. The data extraction method is written in a WebService;
3. ServeiceMethod: name of the method used to extract data in WebService;
4. MinimumPrefixLength: used to set the number of letters entered by the user to display the prompt effect;
5. CompletionSetCount: set the number of data rows prompted;
6. CompletionInterval: the time interval for obtaining books from the server, in milliseconds.
Notes for WebService. asmx:
1. Because the WEB Service provides services for the Ajax framework, you must add the attribute declaration before the class declaration:
[System. Web. Script. Services. ScriptService]
2. Pay special attention to the GetTextString method. All methods to provide services for the AutoCompleteExtender control must meet the following three conditions:
A. The return type of the method must be string [];
B. The input parameter type of the method must be string or int;
C. The two input parameter names must be prefixText and count.
The value entered in the text box is passed to WebService:
Aspx:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "TestSearch. aspx. cs" Inherits = "TestSearch" %>
<% @ Register TagPrefix = "asp" Namespace = "AjaxControlToolkit" Assembly = "AjaxControlToolkit" %>
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Script type = "text/javascript">
Function OnTxtPersonInfoKeyDown (){
Var val = document. getElementById ("<% = TextBox1.ClientID %>"). value;
Var NameClientID = "<% = AutoCompleteExtender1.ClientID %> ";
Var acName = $ find (NameClientID );
If (acName! = Null ){
AcName. set_contextKey (val );
}
}
Function OnTxtPersonInfoKeyDown2 (){
Var val = document. getElementById ("<% = TextBox2.ClientID %>"). value;
Var NameClientID = "<% = AutoCompleteExtender2.ClientID %> ";
Var acName = $ find (NameClientID );
If (acName! = Null ){
AcName. set_contextKey (val );
}
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: ToolkitScriptManager ID = "ToolkitScriptManager1" runat = "Server"/>
<Asp: TextBox ID = "TextBox1" runat = "server"> </asp: TextBox>
<Asp: AutoCompleteExtender ID = "AutoCompleteExtender1" runat = "server"
TargetControlID = "TextBox1"
CompletionSetCount = "10"
EnableCaching = "false"
FirstRowSelected = "true"
UseContextKey = "True"
MinimumPrefixLength = "0"
CompletionInterval = "100"
ServicePath = "WebService. asmx"
ServiceMethod = "GetEnglishName">
</Asp: AutoCompleteExtender>
<Br/>
<Asp: TextBox ID = "TextBox2" runat = "server"> </asp: TextBox>
<Asp: AutoCompleteExtender ID = "AutoCompleteExtender2" runat = "server"
TargetControlID = "TextBox2"
CompletionSetCount = "10"
EnableCaching = "false"
FirstRowSelected = "true"
UseContextKey = "True"
MinimumPrefixLength = "0"
CompletionInterval = "100"
ServicePath = "WebService. asmx"
ServiceMethod = "GetEnglishName">
</Asp: AutoCompleteExtender>
</Div>
</Form>
</Body>
</Html>
Aspx. cs
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Public partial class TestSearch: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
TextBox1.Attributes. Add ("onkeydown", "return OnTxtPersonInfoKeyDown ();");
TextBox2.Attributes. Add ("onkeydown", "return OnTxtPersonInfoKeyDown2 ();");
}
}
Webservice. asmx. cs
Copy codeThe Code is as follows:
<% @ WebService Language = "C #" Class = "WebService" %>
Using System;
Using System. Web;
Using System. Web. Services;
Using System. Web. Services. Protocols;
Using System. Web. Script. Services;
Using System. Data;
Using System. Data. SqlClient;
Using System. Collections. Generic;
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
// To allow ASP. net ajax to call this Web service from a script, uncomment the following line.
[System. Web. Script. Services. ScriptService]
Public class WebService: System. Web. Services. WebService
{
// Read matching information from the database
[WebMethod]
[ScriptMethod]
Public string [] GetEnglishName (string prefixText, int count, string contextKey)
{
SQLHelper sqlH = new SQLHelper ();
// ContextKey = "t ";
String strSql = "select [EnglishName] from [Employee] where [LeftDate] is null and [EnglishName] like '" + contextKey + "% 'order by [EnglishName]";
DataTable dt = sqlH. ExecuteQuery (strSql, CommandType. Text );
List <string> suggestions = new List <string> (); // declare a generic set
Suggestions. Clear ();
If (dt. Rows. Count> 0)
{
For (int I = 0; I <dt. Rows. Count; I ++)
{
Suggestions. Add (dt. Rows [I] [0]. ToString ());
}
}
Return suggestions. ToArray ();
}
}
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
