jquery AutoComplete Auto-complete

Write in front

AutoComplete is a plugin in jQueryUI.

The effect and description can be accessed here, acting like an automatic hint when searching:

I believe that the use of jquery AutoComplete Auto-complete function of the students have a lot, but often we correspond to the needs of different, and some just for the sake of easy, knock two words there is a bunch of information to choose from, but not all the demand is such, we have such a demand, knocking two words, Bind the entity that corresponds to the text.

The main parameters

The common parameters of JQuery UI autocomplete are:

1. Source: Used to specify the data source, type string, Array, Function
   1. String: Server-side address for Ajax requests, return Array/json format
   2. Array: string arrays or JSON arrays
   3. Function (Request, Response): Obtains the input value by Request.term, response ([Array]) to render the data; (Jsonp is this way)
2. MinLength: Activates autocomplete when the string length in the input box reaches MinLength
3. AutoFocus: When the AutoComplete selection menu pops up, the first one is automatically selected
4. Delay: That is, how many milliseconds are delayed to activate AutoComplete

Other infrequently used is not listed.

Files that need to be referenced

<link href= "/content/jquery.autocomplete.css" rel= "stylesheet" type= "Text/css"/> <script type= "text/ JavaScript "src="/scripts/jquery.autocomplete.js "></script> <script type=" Text/javascript ">functionInitautocomplete (JSON) {$ ("#inputxt"). AutoComplete (JSON, {minchars:1, Width:260, DataType:"JSON", Matchcontains:true, Formatitem:function(row, I, max) {returnRow.id + "<" + Row.title + ">"; }, Formatmatch:function(row, I, max) {returnRow.title; }, FormatResult:function(row) {returnRow.title; }}). Result (function(event, row, formatted) {$ ("#newid"). Val (row.id);        }); ; } $ (document). Ready (function () {            $("#inputxt"). Focus (function() {$.post ("/ashx/accessdate.ashx", {},function(data) {initautocomplete (data); }, "JSON");        });    }); </script>

Front desk:

<form action= "" method= "POST" >
<type= "text"  ID= "Inputxt"/><   type= "hidden"  id= "newid"/>
<input type= "Submit" value= "Submission"/>
</form>

This code means that after the text box entered the search text, smart prompt out the corresponding list and the list of the corresponding ID, select a bar, the ID assigned to the hidden field, so that the form can be submitted when the text box content and ID

Submitted together.

Background:

JavaScriptSerializer JSS =NewJavaScriptSerializer (); Dictionary<string,string> Drow =Newdictionary<string,string>(); List<Dictionary<string,Object>> gas =Newlist<dictionary<string,Object>>(); stringStart = System.Web.HttpUtility.UrlDecode (context. request["Start"], Encoding.UTF8); stringEnd = System.Web.HttpUtility.UrlDecode (context. request["End"], Encoding.UTF8); SqlConnection Con=NewSqlConnection (Sqlhelper.sqlcon);SqlDataAdapter da =NewSqlDataAdapter ("SELECT ID, Title, start, [end], UserID, FullName, Confname, Confshortname, AllDay, topic, [description] from UserD Ate", con); DataSet DS=NewDataSet (); Da.            Fill (DS); Con.            Close ();  for(inti =0; I < DS. tables[0]. Rows.Count; i++) {Dictionary<string,Object> Drow2 =Newdictionary<string,Object>(); Drow2. ADD ("ID"Ds. tables[0]. rows[i]["ID"].                ToString ()); Drow2. ADD ("title"Ds. tables[0]. rows[i]["Title"]. ToString ());Gas .            ADD (DROW2); } context. Response.Write (JSS. Serialize (gas)); 

　　

The effect is like this, the following the required documents to serve

Click to download

jquery AutoComplete Auto-complete