Automatic Filling of Baidu Google search using Ajax

This blog uses ajax to implement automatic filling of Baidu Google search. When you search for materials online, the search engine displays a user-friendly automatic prompt function to meet user needs while greatly facilitating customer operations. Currently, Ajax, a client-server interactive programming technology, is widely used. Almost everyone is dealing with Ajax every morning. It allows web applications to display many c/s benefits. Ajax uses asynchronous data transmission (HTTP request) between browsers and web servers ), the Ajax technology is basically used when the client interacts with the server without updating all the pages.

Next, let's talk about how Baidu Google automatically fills in. It mainly uses:

1. A text box used to input data

2. autocompleteextender, a control in Ajax Tool Kit, is used to establish a relationship between the text box and the data source. (Ajax Tool Kit needs to be downloaded online and added to vs to the downloaded DLL file)

3. A file used to obtain database data. The file type is unlimited. It can be WebService (. asmx) and WCF (. SVC) and general processing programs (. ashx) files, or common C # class files and text files. In this example, we use WebService.

 

Let's start the production process of this example:

1. Create a department database and add data to the Department table (tdepartment)

2. Add controls (Textbox, scriptmanager, and autocompleteextender) on the ASPX page and set the control attributes. the HTML code is as follows:

 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>        <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>        <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"            TargetControlID="TextBox1"            MinimumPrefixLength="1"             ServiceMethod="GetDeptName"             ServicePath="WebService1.asmx">        </cc1:AutoCompleteExtender>

 

Attributes of the autocompleteextender control:
1. targetcontrolid: ID of the control that will be automatically input by the secondary node. The control can only be textbox;
2. servicepath: indicates the path of the web service that provides the service. If this parameter is not specified, servicemethod indicates the method name on the page;
3. servicemethod: indicates the method name for providing the service;
4. minimumprefixlength: specifies the minimum number of characters that the Textbox Control should have when the prompt service is provided. The default value is 3;
5. completionsetcount: Number of displayed items. The default value is 10;
6. enablecaching: whether to cache data on the client. The default value is true;
7. completioninterval: the time interval for reading data from the server. The default value is 1000. Unit: milliseconds.

 

3. Add the getdeptname function in the webservice1.asmx file:

 

[Webmethod] public static string [] getdeptname (stringprefixtext) {list <string> suggestions = newlist <string> (); try {sqlconnectioncon = new sqlconnection ("Server = .; initial catalog = Department; userid = sa; Password = 123456 "); sqlcommandcmd = new sqlcommand (); // use" % "cmd for fuzzy search. commandtext = "select depname from tdepartment where depname like '" + prefixtext + "%'"; cmd. connection = con; con. open (); sqldatareadersdr = NULL; SDR = cmd. executereader (); While (SDR. read () {suggestions. add (SDR. getsqlstring (0 ). value);} returnsuggestions. toarray ();} catch (system. exception ex) {suggestions. add (ex. message); returnsuggestions. toarray ();}}

Our work has been completed so far, and the effect remains to be seen. Let's try it!

Download Code