Detailed steps of the drop-down list prompts during Baidu search using AjaxControlToolkit

Source: Internet
Author: User

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. asmxCopy 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. csCopy 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. csCopy 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 ();
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.