Example code Tutorial: AJAX-based Automatic completion

　　Bkjia.com technical documentsI want you to visit some websites have seen Ajax-based Automatic completion of the function, such as: http://www.google.com input: Fire, has not been entered, the following has: fire online navigation. For example:

 

I. Automatic completion of Ajax

Now we need to implement the employee information query function, that is, to retrieve employee details based on the input name. This is a simple data Table query. It is relatively simple to implement this function in ASP. NET.

 

We can see from the above that there are still some shortcomings in this employee information query function. For example, the user may not remember the employee's name, but only remember the first few letters. In this way, the user can only guess based on memory, try again and again. If a prompt is displayed at the same time as the user inputs, the search speed and success rate will be greatly improved. This is the Ajax-based Automatic completion function.

II. Implementation of Automatic Functions
To implement this function, follow these steps.

The server provides the GetSearchItems Method to the client to return the list of employees meeting the conditions.
The onkeydown response function must be added to the input box of the client to instantly obtain the list of qualified employees.
You can use the client's JavaScript to dynamically list the results to be selected, and also provide keyboard and mouse responses.

Iii. server implementation

This article uses AjaxPro. NET as the Ajax development framework, and first makes some preparations for using AjaxPro. NET. Add a reference to AjaxPro. dll, modify the Web. config configuration file, and add the following configuration under the system. web node:

Reference content is as follows: <HttpHandlers> <! -- Register the ajax handler --> <Add verb = "POST, GET" path = "ajaxpro/*. ashx" type = "AjaxPro. AjaxHandlerFactory, AjaxPro"/> </HttpHandlers>

Add the following code to the Page_Load method of the page background code (Default. aspx. cs:

Reference content is as follows: Protected void Page_Load (object sender, EventArgs e) { AjaxPro. Utility. RegisterTypeForAjax (typeof (_ Default )); }

The following defines the method GetSearchItems () provided for the client to call. The parameter query is the keyword value of fuzzy query:

Reference content is as follows: [AjaxPro. AjaxMethod ()] Public ArrayList GetSearchItems (string query) { ArrayList items = new ArrayList (); StringBuilder queryString = new StringBuilder (); QueryString. Append ("select employeeid, lastname, firstname, title, titleofcourtesy from dbo. Employees "); QueryString. Append ("where firstname like '%" + query + "% '"); DataSet ds = DataBase. Instance. ReturnDataSet (queryString. ToString ()); For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++) { Items. Add (ds. Tables [0]. Rows [I] [2]. ToString ()); } Return items; }

The GetSearchItems method returns an ArrayList object that contains the names of all employees whose strings are input by the user.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page