Learn how to use jquery. AutoComplete

Eva is used to return data in JSON format

 

Array Implementation AutoComplete function similar to Baidu search box
Test. aspx in the background returns a string to the foreground
VaR DATA = "core | selectors | attributes | traversing | manipulation | CSS | events effects | Ajax utilities ";
Response. Clear ();
Response. Write (data );
Response. End ();
Use the split () method to convert data to an array. Add a text box with ID txtnamecn to the page.
<SCRIPT src = "http://code.jquery.com/jquery-latest.js"> </SCRIPT>
<LINK rel = "stylesheet" href = "http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type = "text/CSS"/>
<LINK rel = "stylesheet" href = "http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type = "text/CSS"/>
<SCRIPT type = "text/JavaScript" src = "http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"> </SCRIPT>
<SCRIPT>
$ (Document). Ready (function (){

// Use ajax to request background data
$. Ajax ({type: "Get", contenttype: "application/JSON", URL: "test. aspx", success: function (data ){
VaR arr = data. Split ("|"); // use | as the dividing line to convert a string to an array
$ ("# Txtnamecn"). AutoComplete (ARR );
}});
// $ ("# Txtnamecn"). AutoComplete (ARR );
});
</SCRIPT> //////////////////////////////////// /// // The AutoComplete function is returned in the background using a JSON object JSON object [{"namecn ": "Mo", "nameen": "Glory mercy", "IMO": "9486568" },{ "namecn": "oriental 606", "nameen": "dongfang606 ", "IMO": "1061"}] Because jquery recognizes a JSON object as a string, you can use the eval () method to convert it to the eval function built in JavaScript, to convert a JSON string to a JS object, use a pair of "()" to enclose the string first.
Foreground <SCRIPT>
$ (Document). Ready (function (){
$. Ajax ({
Type: "Get ",
Contenttype: "application/JSON ",
URL: "returndata. aspx ",
Success: function (data ){
VaR DATA = eval ("(" + Data + ")");
$ ("# Txtnamecn"). AutoComplete (data ,{
Minchars: 1,
Matchcontains: True,
AutoFill: false,
Formatitem: function (row, I, max ){
Return I + "/" + MAX + ": \" "+ row. namecn;
},
Formatmatch: function (row, I, max ){
Return row. namecn;
},
Formatresult: function (ROW ){
Return row. namecn;
}
});
$ ("# Txtnameen"). AutoComplete (data ,{
Minchars: 1,
Matchcontains: True,
AutoFill: false,
Formatitem: function (row, I, max ){
Return I + "/" + MAX + ": \" "+ row. nameen;
},
Formatmatch: function (row, I, max ){
Return row. nameen;
},
Formatresult: function (ROW ){
Return row. nameen;
}
});
$ ("# Txtimo"). AutoComplete (data ,{
Minchars: 1,
Matchcontains: True,
AutoFill: false,
Formatitem: function (row, I, max ){
Return I + "/" + MAX + ": \" "+ row. IMO;
},
Formatmatch: function (row, I, max ){
Return row. IMO;
},
Formatresult: function (ROW ){
Return row. IMO;
}
});
}
})
})
</SCRIPT>