Autocomplete Automatic completion (WebForm combat)

Because the project needs to use an auto-completion function, function Description:

Requirement one: When adding a recipient, the automatic drop-down displays all the recipient information in the database (the displayed information includes: name-to-receive address-contact info)

Demand two: Select a worthy time, assign value to the corresponding text box (the recipient input box in the assigned name, the contact input box to assign the value of the phone number, the address in the input box assigned to the address)

Solve the demand one (because I am more lazy, so directly choose a more convenient plugin: Autocomplete [Reference study address: http://www.runoob.com/jqueryui/jqueryui-use.html])

Step ① Go to the official website to download the corresponding version of the package, and then add these two references in the project

Step ② Create a new generic handler

Step three ③ writing query and conversion method

1 Add a new query method in the interface (the interface only defines the rules, not the implementation of the specific)

2 inherit the interface and implement the Query method (because the function needs, here the query directly to do the stitching, query out is "recipient-address-contact information")

3 method inside call this method for JSON data conversion (common method can be used directly)

1 //var name = context. request["name"];2             //the parameter name of the query defaults to term3             stringQuery = context. request.querystring[" Term"];4Context. Response.ContentType ="Text/javascript"; 5DataTable sendinfomanage = CMSModelManager.SendInfoManageDAO.Method (query);//call the Query method and return a DataTable6             //deserialization7System.Web.Script.Serialization.JavaScriptSerializer Serailizer =NewSystem.Web.Script.Serialization.JavaScriptSerializer ();8list<dictionary<string,Object>> rows =Newlist<dictionary<string,Object>>();9dictionary<string,Object>Row;Ten             foreach(DataRow Drinchsendinfomanage.rows) One             { Arow =Newdictionary<string,Object>(); -                 foreach(DataColumn Colinchsendinfomanage.columns) -                 { the row. Add (Col. ColumnName, Dr[col]); -                 } - rows. ADD (row); -             } +  -             strings=Serailizer. Serialize (rows); +Context. Response.Write (s);

View Code

Step ④ page receive return data and process return data

1$(function() {2             varName = $ ("#ctl00_contentPlace_txtSender"). Val (). Trim ();3$ ("#ctl00_contentPlace_txtAddressee"). AutoComplete ({4Sourcefunction(Request, response) {5 $.ajax ({6URL: "Handler.ashx",//Request Address7Type: "Post",//Request Type8Data: {"name": Name},//Parameters9Successfunction(data) {Ten                             //console.log (data);  OneResponse ($.map (data),function(item) {//use of the plugin must be processed with eval () A                                 //Console.log (item); -                                 return { -Value:item.show,//assigning values to controls the Result:item.show -                                 } -                             })); -                         +                         }, -Errorfunction(XHR) { +Console.log ("Error occurred"); A                         } at                     }); -                       -                 }, -                     -             }); -         }); in   

View Code

Page effect:

Add: This plugin does not have scroll bar by default and needs to be added manually (maximum height can be set by itself)

1 <style type= "Text/css" >2 . Ui-autocomplete{3 Max-height:250px;4 overflow-y:Auto;5     /*Prevent horizontal scroll bars*/6 Overflow-x:Hidden;7}8   /*IE 6 does not support Max-height9 * We use height instead, but this will force the menu to always show that heightTen    */ One * HTML. Ui-autocomplete{ A Height:250px; -} - </style>

The first demand is over and the second one is in progress ... Later update ....

Too late... Sleep ~

Autocomplete Automatic completion (WebForm combat)